做网站或者写前端页面时，经常会有人问怎么让文字在页面上自动跑起来，也就是咱们常说的滚动字幕。以前大家可能第一反应是上JavaScript，但说实话，如果只是为了实现简单的水平或垂直滚动，用纯CSS动画真的更轻量，性能也更好。今天就把我平时项目里用的这套**滚动字幕CSS动画**方案分享出来，不用写一行JS代码，就能实现那种丝滑的、无缝循环的跑马灯效果。不管你是刚入行的前端小白，还是想给博客加点花样的站长，这篇教程都能直接拿来用。
核心原理：为什么用CSS更好？
很多人纠结用JS还是CSS，其实看场景。JS能动态控制内容变化，但**滚动字幕**这种固定内容循环播放的需求，CSS的`@keyframes`简直是为它量身定做的。最大的好处就是浏览器原生支持，不需要额外的脚本解析，加载速度更快。而且CSS动画是合成层，不阻塞主线程，哪怕页面上其他元素很复杂，滚动也不会卡。我实测过，在低端手机上，纯CSS的**网页滚动字幕**比JS驱动的要流畅不少，掉帧率几乎为零。所以，只要内容不频繁动态更新，首选绝对是CSS。
关键步骤：打造无缝循环效果
做**滚动字幕**最容易翻车的地方就是“衔接”，如果处理不好，文字跑到底会突然跳回开头，看着很尴尬。要解决这个问题，核心思路是“复制内容”。假设你的内容总长度是100px，你需要把内容复制一份放在后面，然后整体向左移动200px。当移动到一半时，视觉上看起来就像是无限循环。具体代码如下：首先定义一个容器`marquee`，设置`overflow: hidden`隐藏溢出部分；然后内部放一个`track`，里面放两份相同的内容。接着写动画：@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
注意这里移动的是`-100%`，指的是`track`自身宽度的100%。因为`track`里有两份内容，所以移动完正好接上。这里有个坑，如果你的内容长度不确定，直接用百分比可能会有误差，建议固定`track`的宽度或者使用`calc`函数辅助计算。我踩过坑，一开始用`-50%`结果对不齐，后来改成基于内容宽度的比例才解决，大家在写**CSS滚动字幕**时也要留意这一点。
进阶技巧：速度与垂直滚动
搞定水平滚动后，你可能还需要垂直方向的**滚动字幕**，或者想调整速度。垂直滚动的逻辑和水平一样，只是把`translateX`换成`translateY`，方向向上或向下即可。关于速度，很多人以为改`animation-duration`就行，但这里有个视觉陷阱：如果内容长短不一，固定时间会导致快慢不均。更专业的做法是根据内容长度动态计算时间，但在纯CSS里比较难实现，通常我们固定一个较快的时间，比如`5s`，让滚动看起来更急促紧凑。另外，别忘了加上`animation-timing-function: linear`，这个非常重要！默认的`ease`会让滚动开始慢中间快结束慢，像刹车一样，非常不自然。改成`linear`后，速度才是恒定的，这才是用户想要的**网页滚动字幕**效果。我建议在开发时，先打开浏览器的开发者工具，暂停动画，检查`transform`的值，确保位移量刚好是内容宽度的整数倍，这样循环起来才完美。如果遇到卡顿，检查一下父容器有没有设置`will-change: transform`，这能提示浏览器提前优化图层。
最后总结一下，用CSS做**滚动字幕**其实没那么难，关键在于理解“复制内容+位移”的无缝原理，以及设置`linear`时间函数。这套方案兼容性极好，现在的浏览器基本都支持。如果你在项目里遇到更复杂的需求，比如鼠标悬停暂停，可以稍微加一点JS控制`animation-play-state`，但核心滚动逻辑依然交给CSS。希望这篇教程能帮你快速上手，让你的网页动起来更有活力。如果有其他CSS技巧想分享，欢迎在评论区交流。
喜欢 
顶
难过
囧
围观
无聊
