CSS实现文字跑马灯无缝衔接循环播放

作者：System 时间：2024年08月21日分类：所有,css 字数：642

要实现无缝衔接的跑马灯效果，可以使用CSS动画结合animation-iteration-count属性设置为infinite。以下是一个简单的例子：

HTML:




<div class="marquee">
  <p>这是跑马灯文字无缝循环播放的效果示例。</p>
</div>

CSS:




.marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
}
 
.marquee p {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 10s linear infinite;
}
 
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

在这个例子中，<p>标签内的文本会不停地从右向左运动，形成跑马灯效果。通过CSS动画，我们设置了一个持续10秒的动画，linear表示动画速度是均匀的，infinite表示动画会无限次数循环播放。通过调整animation属性中的时间参数，可以控制动画的速度。

CSS实现文字跑马灯无缝衔接循环播放

评论已关闭

推荐阅读