探究前端的跑马灯效果是如何用css实现的

跑马灯效果通常是通过CSS的动画功能实现的。以下是一个简单的跑马灯效果的CSS实现示例：




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

HTML部分：




<div class="marquee">
  <span class="marquee-text">这是跑马灯效果 - 持续滚动的文字!</span>
</div>

这段代码定义了一个marquee类，它使得内部内容无视空间限制地水平滚动。marquee-text类定义了一个动画，使得内容从右向左无限循环滚动。可以通过调整animation属性中的时长（这里是10秒）来改变滚动速度。

探究前端的跑马灯效果是如何用css实现的

评论已关闭

推荐阅读