CSS3transition和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;
}

js

相关推荐：

文字跑马灯效果的实现

WPF实现好看的跑马灯特效实例

小程序中实现类似天猫抽奖的大转盘和跑马灯的效果

以上就是CSS3 transition和transform实现跑马灯效果的详细内容，更多请关注Gxl网其它相关文章！