滚动公告栏是网页中常见的一种组件，可以在网页头部或者侧边显示最新的消息和活动。下面介绍如何使用CSS来实现一个滚动公告栏。
/* 定义滚动公告栏的样式 */
.news {
overflow: hidden; /* 隐藏溢出部分 */
height: 30px; /* 设置高度 */
line-height: 30px; /* 行高等于高度 */
border: 1px solid #ccc; /* 添加边框 */
}
/* 定义滚动效果的动画 */
@keyframes scroll-news {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
/* 应用动画到滚动公告栏 */
.news ul {
list-style: none; /* 去除li标记的默认样式 */
margin: 0;
padding: 0;
animation: scroll-news 10s linear infinite; /* 应用动画效果 */
}
/* 定义列表项的样式 */
.news ul li {
float: left;
padding: 0 10px;
white-space: nowrap; /* 禁止换行 */
}
上面的代码中，".news"定义了滚动公告栏的样式，包括高度、行高和边框等。".news ul"将动画效果应用到了列表上，达到了滚动的效果。而列表项的样式则使用了"float"属性来保持在同一行，并使用"white-space"属性避免换行。这样就可以轻松实现一个滚动公告栏。