利用纯CSS3实现文字向右循环闪过效果实例（可用于移动端）

下面是“利用纯CSS3实现文字向右循环闪过效果实例”的完整攻略：

一、概述

这里介绍的是一种利用纯CSS3实现文字向右循环闪过效果的方法，这种效果在移动端上可以很好地展现，同时也很常见。其实现基于CSS3的动画属性，如animation-duration、animation-delay、animation-iteration-count等。

二、实现步骤

（1）在CSS中定义一个父元素，里面放置一个span元素，用来显示文字。

.parent{
    position: relative;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
}
.parent span{
    position: absolute;
    display: inline-block;
}

（2）利用CSS3中的animation属性定义动画，并将其应用在span元素上。

.parent span{
    animation: marquee 7s linear infinite;
}
@keyframes marquee{
    0%  {left: 0;}
    100%{left: -180px;}
}

（3）定义两个以上的span元素，实现多行文字循环闪过。

<div class="parent">
    <span>这是一行文字</span>
    <span>这是第二行文字</span>
    <span>这是第三行文字</span>
</div>

在这里，我们定义了三行文字，每行文字不一定要一样长，其宽度将决定动画完成的时间。

三、示例说明

示例一

下面是一段HTML代码，用于实现一个自适应布局的网页头部菜单，其中包含了利用纯CSS3实现文字向右循环闪过效果的代码。

<header>
  <nav>
    <a href="#">首页</a>
    <a href="#">新闻动态</a>
    <a href="#">产品展示</a>
    <a href="#">联系我们</a>
  </nav>
</header>

header nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header nav a{
  margin-right: 30px;
  font-size: 16px;
  color: #333;
  text-decoration: none;
  position: relative;
}
header nav a::before{
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #333;
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}
header nav a:hover::before{
  transform: scaleX(1);
}
header nav a span{
  display: inline-block;
  animation: marquee 20s linear infinite;
  animation-delay: 2s;
}
@keyframes marquee{
  0% {transform: translateX(0);}
  100% {transform: translateX(-100%);}
}

在这里，我们给每个菜单选项添加了一个下划线并使用了过渡效果，同时利用CSS3实现了文字循环闪过效果，可以完美适用于移动端。

示例二

下面是一段HTML代码，用于实现一个博客页面，其中包含了利用纯CSS3实现文字向右循环闪过效果的代码。

<header>
  <h1>我的博客</h1>
</header>
<main>
  <article>
    <h2>文章标题</h2>
    <p>这是一篇文章内容</p>
  </article>
  <article>
    <h2>文章标题</h2>
    <p>这是一篇文章内容</p>
  </article>
  <article>
    <h2>文章标题</h2>
    <<p>这是一篇文章内容</p>
  </article>
</main>
<footer>
  <ul>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</footer>

header{
  text-align: center;
  margin-bottom: 50px;
}
header h1{
  font-size: 36px;
  color: #333;
  margin-bottom: 10px;
}
article h2{
  font-size: 24px;
  color: #333;
  margin-bottom: 10px;
}
article p{
  font-size: 18px;
  color: #666;
  line-height: 1.5;
}
footer ul{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}
footer li{
  margin-right: 30px;
}
footer a{
  font-size: 16px;
  color: #333;
  text-decoration: none;
  position: relative;
}
footer a::before{
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #333;
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}
footer a:hover::before{
  transform: scaleX(1);
}
footer a span{
  display: inline-block;
  animation: marquee 20s linear infinite;
  animation-delay: 2s;
}
@keyframes marquee{
  0% {transform: translateX(0);}
  100% {transform: translateX(-100%);}
}

在这里，我们给博客页面添加了一个样式，又利用CSS3实现了文字循环闪过效果，可以提升页面的美观程度。