通过CSS的@keyframes和animation实现文字滚动，1. 水平滚动使用translateX使文本从右向左循环移动；2. 垂直滚动通过translateY逐行上滚，适用于公告栏；3. 无缝滚动复制内容并移动50%宽度实现无间隙循环，提升视觉流畅性。

要实现文字滚动动画，可以通过 CSS 的 @keyframes 和 animation 属性来控制文本的位移。常见场景是让长文本在固定容器内水平或垂直滚动，比如新闻跑马灯、通知栏等。

1. 水平文字滚动（从右到左）

适用于单行文本在容器中循环向左滚动。

 <div class="scroll-container">   <p class="scroll-text">这是一段需要滚动显示的文字内容...</p> </div> 

说明：

• 容器设置 overflow: hidden 隐藏溢出内容
• 文本使用 inline-block 以便整体移动
• 动画通过 transform: translateX 实现平滑位移
• 从 100%（完全在右侧）移动到 -100%（完全移出左侧）

2. 垂直文字滚动（向上滚动）

适合多行文本逐行上滚，常用于公告列表。

立即学习“前端免费学习笔记（深入）”；

百度文心百中

百度大模型语义搜索体验中心

32

查看详情

 <div class="vertical-scroll">   <p>公告一</p>   <p>公告二</p>   <p>公告三</p>   <p>公告四</p> </div> 

注意： 此方法依赖固定高度和行数，每段切换间隔由关键帧时间控制。

3. 无缝循环滚动优化

为了让水平滚动更自然，可复制内容避免空白间隙。

 <div class="seamless-container">   <div class="seamless-text">     <span>滚动内容 A</span>     <span>滚动内容 B</span>     <span>滚动内容 A</span>     <span>滚动内容 B</span>   </div> </div> 

利用双份内容，在移动到一半时回到起点，视觉上无停顿。

基本上就这些方法，根据实际布局选择合适的方式即可。

以上就是如何通过css ai overflow css auto 循环 display overflow margin padding border transform animation flex