[分享]css 滚动公告栏

CSS滚动公告栏是一个网站设计中非常常见的元素，它在页面上以滚动的方式显示一些重要的信息或者广告。下面我们来详细了解一下它的实现方法。 这是滚动的内容这是滚动的内容这是滚动的内容 .scrollin...

CSS滚动公告栏是一个网站设计中非常常见的元素，它在页面上以滚动的方式显示一些重要的信息或者广告。下面我们来详细了解一下它的实现方法。

<div class="scrolling-box">
<p class="scrolling-text">这是滚动的内容这是滚动的内容这是滚动的内容</p>
</div>
<style>
.scrolling-box {
overflow: hidden;
height: 30px;
}
.scrolling-text {
display: inline-block;
animation: scrolling 10s linear infinite;
}
@keyframes scrolling {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
</style>

上面的代码中，我们首先使用了一个div元素作为容器，设置了它的高度和overflow属性，将内容超过容器高度的部分隐藏起来。然后在容器内部添加了一个p元素，用于存放滚动的内容。

接着我们使用CSS的animation属性来实现滚动效果。我们定义了一个名为scrolling的动画，并将它应用到scrolling-text元素上。在动画中，我们使用了transform属性的translateX函数来实现横向平移。在0%时，内容显示在容器的最左端，而在100%时，内容横向平移了整个容器的宽度，最终完全消失在容器最右侧。

这样，我们就实现了一个简单的CSS滚动公告栏。您可以对代码进行一些自定义修改，如改变容器大小、滚动速度、文字样式等等，以满足自己的需求。

江苏,常州