css文字跑马灯,css3实现文字跑马灯（css3跑马灯demo） - 全文

CSS文字跑马灯是一种常见的网页特效，它可以让文字在页面上滚动显示，增加页面的动感和视觉效果。本文将介绍一种使用CSS3实现文字跑马灯的方法，希望对大家有所帮助。

首先，在HTML中创建一个包含滚动文字的容器。例如：

<div class="marquee-container">
  <p class="marquee-text">这里是滚动文字的内容</p>
</div>

其中，`.marquee-container`是容器的类名，`.marquee-text`是滚动文字的类名。

接下来，使用CSS3的`@keyframes`规则来定义动画效果。例如：

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

这个规则定义了一个名为`marquee`的动画，它将容器从左往右平移，从而实现文字的滚动效果。其中，`0%`表示动画的起始状态，`100%`表示动画的结束状态，`transform: translateX(-100%)`表示容器向左平移100%的距离。

最后，将动画应用到容器和滚动文字上。例如：

.marquee-container {
  overflow: hidden;
}

.marquee-text {
  display: inline-block;
  white-space: nowrap;
  animation: marquee 5s linear infinite;
}

其中，`.marquee-container`设置了`overflow: hidden`属性，使得容器内的内容超出容器范围时不可见。`.marquee-text`设置了`display: inline-block`属性，使得文字在一行内显示；`white-space: nowrap`属性，使得文字不换行；`animation: marquee 5s linear infinite`属性，将`marquee`动画应用到文字上，并设置动画的时间为5秒，速度为线性，循环次数为无限。

最终，我们就完成了一个使用CSS3实现的文字跑马灯效果。

完整的代码如下：

<style>
  @keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
  }
  
  .marquee-container {
    overflow: hidden;
  }
  
  .marquee-text {
    display: inline-block;
    white-space: nowrap;
    animation: marquee 5s linear infinite;
  }
</style>

<div class="marquee-container">
  <p class="marquee-text">这里是滚动文字的内容</p>
</div>