css3 新闻 上下滚动

CSS3 可以实现上下滚动新闻动态效果，非常适合新闻站点使用。

/* HTML 结构 */
<div class="news">
  <ul>
    <li>这是第一条新闻</li>
    <li>这是第二条新闻</li>
    <li>这是第三条新闻</li>
    ...
  </ul>
</div>

/* CSS 样式 */
.news {
  height: 200px;
  overflow: hidden;
}

.news ul {
  margin: 0;
  padding: 0;
  list-style: none;
  animation: newsroll 10s infinite;
}

@keyframes newsroll {
  0% {transform: translateY(0);}
  25% {transform: translateY(-50px);}
  50% {transform: translateY(-100px);}
  75% {transform: translateY(-150px);}
  100% {transform: translateY(0);}
}

.news li {
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
}

CSS3 中，我们可以通过 @keyframes 关键字来创建动画效果，这里我们创建的是一个名为 newsroll 的关键帧动画，动画的时间长度为 10 秒钟，重复无限次数。而在 <div> 和 <ul> 元素中，我们设置一些样式，比如 height 和 overflow，来限定新闻框的高度和滚动条的出现。而在 <li> 元素中，我们设置一些样式，比如 height 和 line-height，来限定新闻条目的高度和行高。

通过 CSS3 的这些技巧，我们可以很容易地实现新闻上下滚动的动态效果，让网页变得更加生动有趣。