[分享]css3文字无限滚动效果

CSS3文字无限滚动效果是一种非常酷炫的效果，能够为网页注入一股时尚的气息，受到了很多网页设计师和前端开发者的喜爱。要创建这种效果，需要使用CSS3的动画属性以及一些常用的CSS属性。代码如下：.ma...

CSS3文字无限滚动效果是一种非常酷炫的效果，能够为网页注入一股时尚的气息，受到了很多网页设计师和前端开发者的喜爱。

要创建这种效果，需要使用CSS3的动画属性以及一些常用的CSS属性。代码如下：

.marquee {
  width: 100%;
  height: 30px;
  overflow: hidden;
  position: relative;
  border: 1px solid #ccc;
}

.marquee p {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  line-height: 30px;
  text-align: center;
  font-size: 16px;
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100%);
  }
} 

代码中，我们首先定义了一个.marquee的容器，它的宽度为100%、高度为30px、overflow:hidden表示内容超出部分不显示、position:relative表示元素相对定位、border为1px实线边框。

接着，在这个容器中，我们创建了一个

标签，并定义它的position:absolute，宽度和高度都为100%，text-align:center表示居中对齐，font-size:16px表示字体大小为16px，line-height:30px表示行高为30px。此外，我们使用了CSS3的animation属性，并定义了一个名为marquee的动画，10s表示持续时间为10秒，linear表示动画的速度变化是线性的，infinite表示循环播放。

最后，我们在代码中定义了marquee这个动画，实现了文字的无限滚动效果，当动画播放完时，又从0%重新开始播放，从而形成无限滚动的效果。

相信通过上面的代码和介绍，大家已经能够了解如何使用CSS3实现文字无限滚动效果了。这种效果在很多的时候都能为网页增色不少，是非常值得学习和使用的CSS技巧。