使用纯CSS实现文字从右向左滚动动画，首先创建包含文字的容器，通过设置overflow: hidden和white-space: nowrap保证单行显示并隐藏溢出内容，利用@keyframes定义translateX从100%到-100%的平移动画，并将animation应用于滚动元素，实现无限循环的线性滚动效果，可通过调整animation-duration控制速度，添加:hover状态使动画悬停暂停，适用于公告栏等场景。
想实现一个简单的文字动画滚动效果，比如让一串文字从右向左平滑滚动，可以用纯CSS完成。这种效果常用于新闻标题、公告栏或跑马灯展示，适合CSS初学者练手。
1. 基本HTML结构
先写一个容器和要滚动的文字内容：
欢迎访问我们的网站！最新活动上线了，点击了解更多详情……
2. 核心CSS样式与动画
设置容器宽度并隐藏溢出，用@keyframes定义从右到左的平移动画：
.scroll-container { width: 100%; overflow: hidden; white-space: nowrap; background-color: #f0f0f0; padding: 10px 0;}.scroll-text { display: inline-block; font-size: 18px; color: #333; animation: scrollLeft 15s linear infinite;}@keyframes scrollLeft { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); }}
说明：
Ai Mailer
使用Ai Mailer轻松制作电子邮件
49 查看详情
立即学习“前端免费学习笔记（深入）”；
overflow: hidden确保文字移出容器时不显示 white-space: nowrap防止文字换行 animation控制动画时长、速度和循环 使用transform: translateX实现高效平滑移动
3. 可选优化建议
提升用户体验的小调整：
若文字较短，可复制内容延长，避免空白间隔太明显 调整animation-duration控制滚动速度（数值越小越快） 鼠标悬停暂停：添加hover状态：.scroll-text:hover { animation-play-state: paused; } 适配移动端时注意字体大小和容器宽度基本上就这些，不复杂但容易忽略细节。掌握这个例子后可以扩展成多行滚动或上下滑动效果。
以上就是css初级项目文字动画滚动效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1014505.html
微信扫一扫 
支付宝扫一扫 
