通过CSS的@keyframes和animation实现文字滚动，1. 水平滚动使用translateX使文本从右向左循环移动；2. 垂直滚动通过translateY逐行上滚，适用于公告栏；3. 无缝滚动复制内容并移动50%宽度实现无间隙循环，提升视觉流畅性。
要实现文字滚动动画，可以通过 CSS 的 @keyframes 和 animation 属性来控制文本的位移。常见场景是让长文本在固定容器内水平或垂直滚动，比如新闻跑马灯、通知栏等。
1. 水平文字滚动（从右到左）
适用于单行文本在容器中循环向左滚动。
这是一段需要滚动显示的文字内容...
.scroll-container { width: 300px; overflow: hidden; white-space: nowrap; border: 1px solid #ccc; padding: 10px;}.scroll-text { display: inline-block; animation: scrollLeft 10s linear infinite;}@keyframes scrollLeft { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); }}
说明：
容器设置 overflow: hidden 隐藏溢出内容 文本使用 inline-block 以便整体移动 动画通过 transform: translateX 实现平滑位移 从 100%（完全在右侧）移动到 -100%（完全移出左侧）
2. 垂直文字滚动（向上滚动）
适合多行文本逐行上滚，常用于公告列表。
立即学习“前端免费学习笔记（深入）”；
音疯
音疯是昆仑万维推出的一个AI音乐创作平台，每日可以免费生成6首歌曲。
146 查看详情 .vertical-scroll { height: 60px; overflow: hidden; border: 1px solid #ddd;}.vertical-scroll p { margin: 0; line-height: 60px; animation: scrollUp 8s infinite;}@keyframes scrollUp { 0%, 20% { transform: translateY(0); } 25%, 45% { transform: translateY(-100%); } 50%, 70% { transform: translateY(-200%); } 75%, 95% { transform: translateY(-300%); } 100% { transform: translateY(0); }}
公告一
公告二
公告三
公告四
注意： 此方法依赖固定高度和行数，每段切换间隔由关键帧时间控制。
3. 无缝循环滚动优化
为了让水平滚动更自然，可复制内容避免空白间隙。
.seamless-container { width: 300px; overflow: hidden;}.seamless-text { display: flex; animation: scrollSeamless 10s linear infinite;}.seamless-text span { flex: 0 0 auto; padding-right: 20px;}@keyframes scrollSeamless { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); }}
滚动内容 A 滚动内容 B 滚动内容 A 滚动内容 B
利用双份内容，在移动到一半时回到起点，视觉上无停顿。
基本上就这些方法，根据实际布局选择合适的方式即可。
以上就是如何通过css animation实现文字滚动动画的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1056567.html
微信扫一扫 
支付宝扫一扫 
