css如何做横向滚动文字

用CSS实现横向滚动文字

横向滚动文字在网页设计中非常常见，可用于显示新闻、公告、幻灯片等内容。使用CSS可以轻松实现横向滚动文字效果，本文将为大家详细介绍如何实现。

1. 基本原理

要实现横向滚动文字，需要创建一个足够宽的容器，容器内放置一个宽度超过容器的元素，通过设置元素的动画效果来实现滚动文字的效果。

具体来说，需要用CSS设置容器的宽度和高度，同时隐藏内部溢出的内容。然后，在容器内创建一个元素，设置它的宽度为内部内容的实际宽度，把容器的overflow属性设置为hidden，让内容被隐藏，然后通过CSS动画让元素水平滚动，从而实现横向滚动文字的效果。

1.1 代码实现

.container {
  width: 100%; /* 容器100%宽度 */
  height: 50px; /* 容器高度50px */
  overflow: hidden; /* 内容溢出隐藏 */
}
.content {
  display: inline-block; /* inline-block元素不会强制换行 */
  white-space: nowrap;  /* 不换行 */
  animation: scroll-left 15s linear infinite; /* 动画效果 */
}
@keyframes scroll-left {
  0% {
    transform: translateX(0); /* 从0开始平移 */
  }
  100% {
    transform: translateX(-100%); /* 平移距离为元素宽度 */
  }
}

上述代码中，首先定义了一个容器和一个元素，容器的宽度设置成了100%，高度设置成50px，overflow属性表示当内容溢出容器时隐藏。元素的display属性设置成了inline-block，以确保元素不会换行，white-space属性设置为nowrap，使内容不会在单词之间换行。

接着，在元素上定义了一个CSS动画scroll-left，它会使元素从左向右水平滚动。其中，transform属性指示元素平移的距离，我们用translateX(-100%)已让元素平移与它的宽度相等的距离，动画效果设为15秒，线性无限循环。

2. 实战应用

使用上述方法可以实现简单的横向滚动文字效果。接下来，我们将讨论如何用CSS更全面地控制滚动文字的外观和行为。

2.1 容器设置

在实际使用中，可能需要根据页面布局和其他要求调整滚动文字的样式和行为。此时，前面的代码就不能满足要求了。下面我们讲解一些更高级的CSS技巧，用于实现更多的效果。

首先是容器设置，通常情况下不用修改，需要指出的是，容器的宽度一定要设置成固定数值，否则滚动无法正确进行。

2.2 滚动方向

滚动文字的方向有两种：向左滚动和向右滚动。上面的代码是向左滚动，如果我们想改为向右滚动，只需要把translateX的值改为正数即可：

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

要实现向右滚动，只需要让translateX的值范围为从100%到0。

2.3 滚动速度

滚动文字的速度也可以通过CSS进行调整。我们可以修改animation属性来调整速度。比如，下面的代码代表15秒内元素平移完容器宽度的60%：

animation: scroll-left 15s linear 0s infinite;

其中的linear表示变化是匀速的，0s表示该动画从开始时就执行，无需延迟。如果想让滚动速度变慢，可以把时间调整为更长的值，如果想让滚动速度变快，可以把时间调整为更短的值。

2.4 滚动暂停

有时候我们希望鼠标移入滚动文字时暂停滚动，移出后继续滚动。这种效果可以通过CSS动画控制实现。

.container:hover .content {
  animation-play-state: paused; /* 鼠标移入停止动画 */
}
.container .content {
  animation-play-state: running; /* 鼠标移出继续动画 */
  animation: scroll-left 15s linear 0s infinite;
}

上述代码通过应用:hover伪类来控制鼠标移入时元素停止动画，移出时恢复动画。元素默认状态下仍应用scroll-left动画，并重新定义了animation-play-state为running。

2.5 点击滚动

有些时候我们希望能够通过点击滚动文字来进行页面跳转，这个功能也可以通过CSS和JavaScript实现。

首先，在HTML中增加一个超链接：

<div class="container">
  <a href="https://www.example.com" class="content"> 滚动文字 </a>
</div>

然后在CSS中对超链接的样式以及点击效果进行定义：

.container .content {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
.container .content:hover {
  text-decoration: underline;
}
.container .content.clicked {
  animation-play-state: paused;
  color: #f00;
}

最后在JavaScript中定义超链接的点击事件：

const el = document.querySelector('.container .content');
el.addEventListener('click', function() {
  el.classList.add('clicked');
  window.open(el.href, '_blank');
});

以上代码中，我们对超链接的颜色、文字修饰和鼠标指示器进行了定义。在:hover伪类中，我们增加了下划线效果。在点击事件中，我们通过classList.add方法给元素增加了一个clicked类名，同时使用window.open来在新标签页中打开链接。

总结

横向滚动文字在网页设计中具有很大的灵活性，可以应用于新闻、公告、广告等场景中，也可以通过CSS技巧实现更多的效果。本文介绍了如何使用CSS实现横向滚动文字，包括实现方式、代码样式和感受等方面的内容，最后我们通过在实战中展示更多的滚动效果和操作功能来进一步加深了对滚动文字操作的理解和应用，希望对大家有所帮助。