css 实现排行榜向上滚动

要实现排行榜向上滚动的效果，可以使用CSS动画。以下是一个简单的例子，展示了如何使用CSS Keyframes实现一个简单的向上滚动效果：

HTML:

<div class="ranking-list">
  <div class="ranking-item">
    <span class="rank">1</span>
    <span class="name">Item 1</span>
  </div>
  <div class="ranking-item">
    <span class="rank">2</span>
    <span class="name">Item 2</span>
  </div>
  <!-- 更多排行项 -->
</div>

CSS:

.ranking-list {
  overflow: hidden;
  position: relative;
  height: 50px; /* 控制可见区域的高度 */
}
 
.ranking-item {
  line-height: 50px; /* 与.ranking-list的高度一致 */
  padding: 0 10px;
  position: absolute;
  bottom: 0;
  width: 100%;
  animation: scroll-up 10s linear infinite; /* 控制动画持续时间和行为 */
}
 
.ranking-item:nth-child(2) {
  animation-delay: 5s; /* 为每个项目设置不同的动画延迟 */
}
 
/* 更多动画样式 */
 
@keyframes scroll-up {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50px); /* 每次向上移动的距离 */
  }
}

这段代码会创建一个类似排行榜的列表，所有项目会不断地向上滚动。每个.ranking-item都被设置了一个动画，使其向上移动。通过调整animation-delay属性，可以使每个项目都有不同的启动时间，从而创建一个连续滚动的效果。通过调整animation属性中的duration值，可以控制滚动的速度和频率。