使用CSS动画实现公告滚动，通过HTML结构与@keyframes定义从右到左的无限循环动画，利用transform: translateX控制位移，overflow: hidden确保内容溢出隐藏，可复制文本实现无缝滚动，并通过media查询适配移动端，提升用户体验。
实现公告滚动条效果，可以通过 CSS 动画和简单的 HTML 结构来完成。这种效果常用于新闻公告、跑马灯通知等场景，下面是一个实用且兼容性较好的实现方式。
1. 基本HTML结构
先构建一个包含滚动内容的容器：
欢迎访问本站！最新活动已上线，点击查看详情～
本周五晚8点|直播|抽奖，不要错过！
2. 核心CSS样式与动画
使用 @keyframes 创建从右到左的滚动动画，并控制容器溢出隐藏：
.notice-scroll {
width: 100%;
overflow: hidden;
white-space: nowrap;
background-color: #f0f8ff;
padding: 10px 0;
box-sizing: border-box;
}
.notice-content {
display: inline-block;
font-size: 16px;
color: #333;
animation: scrollLeft 15s linear infinite;
}
@keyframes scrollLeft {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
width: 100%;
overflow: hidden;
white-space: nowrap;
background-color: #f0f8ff;
padding: 10px 0;
box-sizing: border-box;
}
.notice-content {
display: inline-block;
font-size: 16px;
color: #333;
animation: scrollLeft 15s linear infinite;
}
@keyframes scrollLeft {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
3. 可选优化：无缝滚动增强
为了让滚动更平滑，可以复制内容拼接，实现视觉上的无缝衔接：
欢迎访问本站！最新活动已上线... 欢迎访问本站！最新活动已上线...
同时可调整动画时间，适配内容长度：
- 内容越长，animation-duration 越大
- 速度过快可将 15s 改为 20s 或更高
- 想反向滚动？把 translateX 方向调换即可
4. 响应式与移动端适配
在小屏幕上自动调整滚动速度或暂停动画：
@media (max-width: 768px) {
.notice-content {
animation-duration: 25s;
}
}
基本上就这些。通过 transform + animation 的组合，无需 JavaScript 就能实现流畅的公告滚动效果，兼容大多数现代浏览器，维护简单，性能也不错。
