公告纵向滚动css3 代码示例

公告纵向滚动是一种常见的网页效果，可以使公告内容在垂直方向上滚动展示，给用户提供更好的阅读体验。在CSS3中，我们可以利用一些属性和动画效果来实现这一效果。

我们需要创建一个包含公告内容的容器元素。可以使用一个div元素，并设置其高度和宽度，以及overflow属性为hidden，以确保内容超出容器部分不可见。

接下来，我们可以使用CSS3的动画属性来实现滚动效果。我们可以使用@keyframes规则来定义动画的关键帧，通过改变元素的transform属性来实现滚动效果。在这个例子中，我们将使用translateY()函数来改变元素的垂直位置。

下面是一个示例代码：

<div class="623c-52e9-7093-b364 notice-container">
  <ul class="52e9-7093-b364-72ef notice-list">
    <li>这是第一条公告</li>
    <li>这是第二条公告</li>
    <li>这是第三条公告</li>
    <li>这是第四条公告</li>
    <li>这是第五条公告</li>
  </ul>
</div>

.notice-container {
  height: 200px;
  width: 300px;
  overflow: hidden;
}
.notice-list {
  animation: scroll-notice 10s infinite;
}
@keyframes scroll-notice {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

在上面的代码中，我们首先创建了一个.notice-container的容器元素，设置了它的高度和宽度，并将overflow属性设置为hidden，以确保内容超出容器部分不可见。

接下来，我们为.notice-list元素添加了一个动画属性。我们使用了名为scroll-notice的动画，并设置了它的持续时间为10秒，并且设置了无限循环。

在@keyframes规则中，我们定义了动画的关键帧。在0%的关键帧中，我们将元素的垂直位置设置为0，表示初始状态。在100%的关键帧中，我们将元素的垂直位置设置为-100%，表示元素向上滚动了整个容器的高度。

通过这样的设置，我们就可以实现公告内容在垂直方向上的滚动效果了。你可以根据实际需求调整容器的高度、滚动速度和动画效果，以达到更好的展示效果。

总结一下，公告纵向滚动是一种常见的网页效果，在CSS3中可以使用动画属性和关键帧来实现。通过设置容器的高度、滚动速度和动画效果，我们可以实现一个流畅的公告滚动效果，提升用户的阅读体验。