1.1 滚动文字的定义与应用场景
滚动文字就像电子时代的手写横幅。想象一下商场里不断移动的促销信息，或者地铁站台显示列车时刻的电子屏。这些文字仿佛有了生命，在有限的空间里循环往复地传递信息。
我在帮朋友设计一个小型电商网站时，第一次意识到滚动文字的实用价值。他们需要在首页展示最新优惠，但页面空间有限。传统的静态文字要么占据太多位置，要么信息展示不全。滚动文字完美解决了这个矛盾——既节省空间，又能持续吸引用户注意力。
这类效果常见于新闻网站的跑马灯、移动端应用的公告栏、数据可视化面板的实时数据展示。甚至一些创意作品也会用滚动文字营造独特的视觉节奏。
1.2 常见滚动文字效果展示
横向滚动是最经典的形式。文字从右向左平稳移动，像老式火车站的信息板。这种效果特别适合展示连续的信息流，比如股票行情或新闻摘要。
垂直滚动则常见于手机通知栏。文字从下往上缓缓升起，每条信息都有足够的曝光时间。我记得某个音乐App就用这种效果展示歌词，让用户在听歌时能跟上节奏。
还有一种渐隐渐现的效果。文字在固定位置交替显示，通过透明度变化实现平滑过渡。这种设计避免了机械式的移动，给用户更柔和的视觉体验。
某些创意网站会采用不规则路径的滚动。文字可能沿着曲线运动，或者像弹幕一样随机飘过屏幕。这些效果虽然炫酷，但需要谨慎使用——毕竟可读性永远是第一位的。
1.3 实现滚动文字的基本原理
所有滚动效果都建立在同一个简单概念上：通过持续改变元素的位置或内容来实现运动错觉。就像我们小时候玩的翻页动画，快速连续的画面变化让静态元素活了起来。
CSS实现主要依赖@keyframes规则和animation属性。通过定义起始和结束状态，浏览器会自动计算中间过渡效果。这就像给文字设定好起点和终点，然后让它们自己跑完全程。
JavaScript提供了更精细的控制能力。我们可以监听用户交互，随时暂停、加速或改变滚动方向。这种动态控制让滚动文字不再是机械的循环，而成为能与用户对话的智能组件。
现代浏览器还提供了Web Animations API，将CSS动画和JavaScript控制的优点结合在一起。开发者可以用更直观的方式描述复杂动画序列，代码也更容易维护。
实现时需要考虑性能问题。尽量使用transform和opacity这类属性，它们能触发GPU加速，避免重排和重绘带来的卡顿。毕竟流畅的体验比华丽的效果更重要。 .marquee { animation: scroll-text 10s linear infinite; white-space: nowrap; }
@keyframes scroll-text { from { transform: translateX(100%); } to { transform: translateX(-100%); } }
.optimized-marquee { will-change: transform; transform: translateZ(0); / 强制开启GPU加速 / }
