使用CSS动画实现公告滚动，通过HTML结构与@keyframes定义从右到左的无限循环动画，利用transform: translateX控制位移，overflow: hidden确保内容溢出隐藏，可复制文本实现无缝滚动，并通过media查询适配移动端，提升用户体验。
实现公告滚动条效果，可以通过 CSS 动画和简单的 HTML 结构来完成。这种效果常用于新闻公告、跑马灯通知等场景，下面是一个实用且兼容性较好的实现方式。
先构建一个包含滚动内容的容器：
<div class="notice-scroll">
<div class="notice-content">
欢迎访问本站！最新活动已上线，点击查看详情～
本周五晚8点直播抽奖，不要错过！
</div>
</div>
使用 @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%);
}
}
为了让滚动更平滑，可以复制内容拼接，实现视觉上的无缝衔接：
立即学习“前端免费学习笔记（深入）”；
这是易秀购主题网转载的一款原创来至web主题公园的一款wordpress cms主题，非常适合做图片展示，或婚纱摄影类wordpress主题，采用了大气的网格化无缝设计，使列表以格子铺的方式排列，鼠标悬停的可以出现文章的简介。网站上方可以书写自己的广告语，图片也是可以替换掉的，图片会随着鼠标的移动而轻移，并且在鼠标滚动的时候，下面的模块会直接遮盖这个区域，这款wordpress cms主题视觉效果
2
<div class="notice-content"> 欢迎访问本站！最新活动已上线... 欢迎访问本站！最新活动已上线... </div>
同时可调整动画时间，适配内容长度：
在小屏幕上自动调整滚动速度或暂停动画：
@media (max-width: 768px) {
.notice-content {
animation-duration: 25s;
}
}
基本上就这些。通过 transform + animation 的组合，无需 JavaScript 就能实现流畅的公告滚动效果，兼容大多数现代浏览器，维护简单，性能也不错。
以上就是在css中实现公告滚动条效果的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
202
收藏
