使用纯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%);
}
}
说明：
立即学习“前端免费学习笔记（深入）”；
-
overflow: hidden确保文字移出容器时不显示 -
white-space: nowrap防止文字换行 -
animation控制动画时长、速度和循环 - 使用
transform: translateX实现高效平滑移动
3. 可选优化建议
提升用户体验的小调整：
- 若文字较短，可复制内容延长，避免空白间隔太明显
- 调整
animation-duration控制滚动速度（数值越小越快） - 鼠标悬停暂停：添加
hover状态：.scroll-text:hover { animation-play-state: paused; } - 适配移动端时注意字体大小和容器宽度
