CSS3transition和transform实现跑马灯效果

来源：懂视网责编：小OO 时间：2020-11-27 18:49:20

CSS3transition和transform实现跑马灯效果

这是之前客户的一个需求，给的 demo 是用 gif 实现跑马灯，但是的没法用 gif，因为图上的文字需要翻译成各国语言，所以不能使用图片来实现，那么，自己写一个咯。html。<；p lantern>；<；ul>；<；li>；1<；/li>；<；li>；2<；/li>；<；li>；3<；/li>；<；li>；4<；/li>；<；/ul>；<；/p>；。css；

推荐度：

点击下载本文 文档为doc格式

导读这是之前客户的一个需求，给的 demo 是用 gif 实现跑马灯，但是的没法用 gif，因为图上的文字需要翻译成各国语言，所以不能使用图片来实现，那么，自己写一个咯。html。<；p lantern>；<；ul>；<；li>；1<；/li>；<；li>；2<；/li>；<；li>；3<；/li>；<；li>；4<；/li>；<；/ul>；<；/p>；。css；

本文主要和大家介绍结合 CSS3 transition transform 实现简单的跑马灯效果的示例的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

这是之前客户的一个需求，给的 demo 是用 gif 实现跑马灯，但是我们的没法用 gif，因为图上的文字需要翻译成各国语言，所以不能使用图片来实现，那么，自己写一个咯。html

<p lantern>
 <ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 </ul>
</p>

css

* {
 margin: 0;
 padding: 0;
}

[lantern] {
 overflow: hidden;
}

ul {
 white-space: nowrap;
 font-size: 0;
 transform: translateX(0);
 transition: transform 0s linear;
}

li {
 width: 50vw;
 border: 1px solid red;
 display: inline-block;
 height: 30px;
 font-size: 16px;
}

CSS3transition和transform实现跑马灯效果

推荐度：

点击下载本文 文档为doc格式

标签：跑马灯实现 css

热门焦点

CSS3transition和transform实现跑马灯效果

CSS3transition和transform实现跑马灯效果

CSS3transition和transform实现跑马灯效果

最新推荐

猜你喜欢

热门推荐