css实现匀速滚动公告栏

HTML代码：

<div class="notice">
  <ul>
    <li>这是第一条公告</li>
    <li>这是第二条公告</li>
    <li>这是第三条公告</li>
    <li>这是第四条公告</li>
    <li>这是第五条公告</li>
    <li>这是第六条公告</li>
  </ul>
</div>

CSS代码：

.notice {
  width: 200px;
  height: 30px;
  overflow: hidden;
}

.notice ul {
  padding: 0;
  margin: 0;
  list-style: none;
  animation: marquee 10s linear infinite;
}

.notice ul li {
  line-height: 30px;
}

@keyframes marquee {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-180px);
  }
}

解释：

- 设置公告栏的宽度和高度，并将其overflow属性设置为hidden，这样就可以隐藏超出部分的内容。
- 将ul元素的padding和margin属性都设置为0，并将其list-style属性设置为none，这样就可以去掉ul元素的默认样式。
- 使用animation属性，将marquee动画应用到ul元素上。marquee动画将在10秒内以线性方式匀速滚动，且无限循环播放。
- 将li元素的行高设置为公告栏的高度，这样就可以让每条公告在公告栏中垂直居中显示。
- 使用@keyframes规则定义marquee动画。在动画开始时，ul元素的transform属性的translateY值为0，表示公告栏还没有滚动；在动画结束时，ul元素的transform属性的translateY值为-180px，表示公告栏滚动了一定的距离。由于ul元素的高度为6个li元素的高度之和，所以translateY的值为-180px。