不用JS，纯CSS打造网页跑马灯效果

网页跑马灯效果，CSS就能搞定！

在网页设计中，跑马灯效果可以很好地吸引用户眼球，传递重要信息。其实，不用JavaScript，只用CSS就能轻松实现！

将带你深入了解如何使用CSS的 animation 和 transform 属性，打造流畅的跑马灯效果。

1. CSS动画基础

animation 属性是CSS3中的关键属性，它允许定义一系列的样式变化，并使这些变化随着时间平滑过渡，形成动画效果。

通过设置 animation-name、animation-duration、animation-timing-function、animation-delay、animation-direction、animation-iteration-count、animation-fill-mode 等子属性，我们可以完全掌控动画的每一个阶段。

例如，创建一个名为 scrolling-text 的动画，持续5秒，速度线性：

@keyframes scrolling-text {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.scroll-text {
  animation-name: scrolling-text;
  animation-duration: 5s;
  animation-timing-function: linear;
}

上面的代码中，@keyframes 定义了一个动画，从0%到100%的进度中，transform: translateX() 的值从0变为-100%，实现了元素向左移动的动画效果。

2. CSS变换：transform

transform 属性可以让我们对元素进行二维或三维的变形，例如旋转、缩放、位移等等。在实现跑马灯效果时，translateX 函数可以用来在x轴上平移元素，创造出滚动的视觉效果。

举例来说，如果元素宽度为100%，那么 transform: translateX(-100%) 会将元素向左移动自身宽度的距离，从而形成“滚动”的效果。

3. 适配各种屏幕

为了让跑马灯效果在不同尺寸的屏幕上都能完美呈现，我们需要进行一些适配工作，例如使用媒体查询（@media）根据不同的屏幕宽度调整动画的速度和方向等等。