CSS滚动文本效果

一种微妙的文本滚动效果，使用 CSS3 动画在一系列文本中滑动。

如何使用它：

1. 将您的文本添加到滚轮。

<span id="rolltext">
  HTML<br/>
  CSS<br/>
  没有 JavaScript<br/>
  ...更多文字在这里...

2. 滚轮的示例 CSS。

。滚筒{
  高度：4.125rem；
  线高：4rem；
  位置：相对；
  溢出：隐藏；
  宽度：100%；
  显示：弯曲；
  证明内容：中心；
  对齐项目：居中；
  颜色：#1D3557；
}

3. 启用文字的滚动效果。

.roller #rolltext {
  位置：绝对；
  顶部：0；
  动画：幻灯片5s无限；  
}
@keyframes 幻灯片 {
  0%{
    顶部：0；
  }
  25%{
    顶部：-4rem；    
  }
  50%{
    顶部：-8rem；
  }
  72.5%{
    顶部：-12.25rem；
  }
}

以上就是关于“CSS滚动文本效果”的介绍，大家如果想了解更多相关知识，可以关注一下极悦的Java视频，里面的课程内容细致全面，通俗易懂，适合小白学习，希望对大家能够有所帮助。