[分享]css3文字纵向无缝滚动

CSS3提供了丰富的文本效果，其中之一便是纵向无缝滚动。该效果可以用于展示一些滚动的新闻、广告或其他重点内容。下面是一个实现纵向无缝滚动的CSS3代码示例：.marquee { height: 50p...

CSS3提供了丰富的文本效果，其中之一便是纵向无缝滚动。该效果可以用于展示一些滚动的新闻、广告或其他重点内容。

下面是一个实现纵向无缝滚动的CSS3代码示例：

.marquee {
  height: 50px; /*设置滚动区域高度*/
  overflow: hidden; /*隐藏溢出部分*/
  position: relative; /*相对定位*/
}

.marquee p {
  position: absolute; /*绝对定位*/
  width: 100%;
  height: 100%;
  margin: 0;
  line-height: 50px; /*设置行高等于滚动区域高度，保证文字竖直居中*/
  animation: marquee linear 20s infinite; /*设置动画效果*/
}

@keyframes marquee {
  0% {
    transform: translateY(0); /*文字不滚动*/
  }
  100% {
    transform: translateY(-100%); /*文字向上滚动100%*/
  }
} 

上述代码中，.marquee类定义一个滚动区域，内部有若干个p标签，用于放置滚动的文本内容。其中，line-height属性设置为50px，与滚动区域高度相同，保证文本竖直居中；animation属性设置了一个名为“marquee”的动画效果，该动画效果将在20秒内按线性规律无限循环，滚动文本向上方滚动100%。同时，为了保证文本能够无限滚动，需要将原本在视口范围内的文本内容复制一份并追加到文本内容的下方（也可以采用JS等其他方式实现）。

实际应用中，我们可以将代码中的文本内容替换成自己需要滚动的文本内容，并可以根据需要调整滚动区域的高度、滚动速度等相关参数。