使用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%);
}
}
3. 可选优化：无缝滚动增强
为了让滚动更平滑，可以复制内容拼接，实现视觉上的无缝衔接：
立即学习“前端免费学习笔记（深入）”；
奥硕企业网站管理系统3.0.2
下载
临沂奥硕软件有限公司拥有国内一流的企业网站管理系统，奥硕企业网站管理系统真正会打字就会建站的管理系统，其强大的扩展性可以满足企业网站实现各种功能（唯一集成3O多套模版的企业建站系统）奥硕企业网站管理系统具有一下特色功能1、双语双模（中英文采用单独模板设计，可制作中英文不同样式的网站）2、在线编辑JS动态菜单支持下拉效果，同时生成中文，英文，静态3个JS菜单3、在线制作并调用FLASH展示动画4、自
欢迎访问本站！最新活动已上线... 欢迎访问本站！最新活动已上线...
同时可调整动画时间，适配内容长度：
- 内容越长，animation-duration 越大
- 速度过快可将 15s 改为 20s 或更高
- 想反向滚动？把 translateX 方向调换即可
4. 响应式与移动端适配
在小屏幕上自动调整滚动速度或暂停动画：
@media (max-width: 768px) {
.notice-content {
animation-duration: 25s;
}
}
基本上就这些。通过 transform + animation 的组合，无需 JavaScript 就能实现流畅的公告滚动效果，兼容大多数现代浏览器，维护简单，性能也不错。
