css3文字向上滚动效果

CSS3中提供了很多强大的动画效果，其中文字向上滚动效果是常见的一个效果。

.marquee {
  display: inline-block;
  position: relative;
  overflow: hidden;
  animation: marquee 10s infinite linear;
}

.marquee p {
  display: inline-block;
  padding-right: 50px;
}

@keyframes marquee {
  0% {
    top: 0;
  }
  100% {
    top: -100%;
  }
}

首先，我们需要将文字内容放在一个容器中，并设置容器为inline-block并设置position为relative，然后使用overflow:hidden来隐藏文字内容的溢出部分。

接下来，我们需要创建一个名为marquee的动画，使用animation属性将动画绑定到容器上，设置动画的时间为10秒，重复次数为无限，动画的速度为线性运动。

在.p标签中，我们设置了display:inline-block让文字块能够在同一行显示，并设置padding-right:50px来给文字添加一定的右边距离。

动画中的关键帧规定了文字容器从top:0到top:-100%的运动方式，从而实现了文字向上滚动的效果。

我们可以在HTML中使用如下代码调用这个效果：

<div class="marquee">
  <p>这里是滚动的文字内容</p>
  <p>这里是另一个滚动的文字内容</p>
</div>

这样，两个p标签内的文字就会不断向上滚动，直到页面关闭或移除这个效果为止。