告别单调！CSS文字横向滚动实现，打造炫酷网页特效

2023-05-07 08:59:38

利用CSS打造吸睛的文字横向滚动效果

打造动态网页

文字横向滚动，这一技术让网页文字循环滚动，让您的内容更加生动迷人。无论是新闻、公告还是产品信息，这种效果都能为您的页面增添动感，吸引访客的目光。

掌握CSS实现横向滚动

要想让文字在网页上横向滚动，就得借助CSS的animation属性。这个属性可以让元素动起来，包括移动、旋转和缩放。

/* 定义动画名称 */
@keyframes my-animation {
  from {
    left: 0;
  }
  to {
    left: -100%;
  }
}

/* 为元素应用动画 */
.text-scroll {
  animation: my-animation 10s infinite linear;
}

这段代码中，@keyframes my-animation定义了动画的名称和效果。from和to分别代表动画的起始和终止状态。其中，from表示元素初始位于最左边，而to则表示元素移动到最右边。

animation属性将my-animation动画应用到.text-scroll元素。10s表示动画持续时间为10秒，infinite表示动画无限循环，linear表示动画匀速播放。

鼠标交互控制

为了让文字滚动更具交互性，您可以利用animation-play-state属性，实现鼠标移入暂停、移出继续的效果。

/* 鼠标移入时暂停动画 */
.text-scroll:hover {
  animation-play-state: paused;
}

/* 鼠标移出时继续动画 */
.text-scroll:not(:hover) {
  animation-play-state: running;
}

这段代码中，当鼠标移入.text-scroll元素时，animation-play-state属性被设置为paused，动画暂停播放。而当鼠标移出.text-scroll元素时，animation-play-state属性被设置为running，动画继续播放。

完整代码实践

以下是完整代码示例，展示如何利用CSS实现文字横向滚动，并添加鼠标交互功能：

<!DOCTYPE html>
<html>
<head>

  <style>
    /* 定义动画名称 */
    @keyframes my-animation {
      from {
        left: 0;
      }
      to {
        left: -100%;
      }
    }

    /* 为元素应用动画 */
    .text-scroll {
      animation: my-animation 10s infinite linear;
    }

    /* 鼠标移入时暂停动画 */
    .text-scroll:hover {
      animation-play-state: paused;
    }

    /* 鼠标移出时继续动画 */
    .text-scroll:not(:hover) {
      animation-play-state: running;
    }
  </style>
</head>
<body>
  <div class="text-scroll">
    <p>新闻</p>
    <p>公告</p>
    <p>产品信息</p>
  </div>
</body>
</html>