CSS 如何创建无空白空间的CSS跑马灯效果

在本文中，我们将介绍如何使用CSS创建一个无空白空间的跑马灯效果。跑马灯效果经常在网页中用来展示循环滚动的内容，如新闻标题、广告语等。通过以下步骤，您可以轻松地在您的网页上实现这一效果。

阅读更多：CSS 教程

步骤 1：HTML 结构

首先，我们需要为跑马灯效果创建一个基本的HTML结构。我们可以使用一个容器元素来包裹我们的内容，同时为跑马灯设置一个固定的宽度和高度，以便我们可以控制滚动效果。请参考以下示例代码：

<div class="marquee">
  <ul>
    <li>内容 1</li>
    <li>内容 2</li>
    <li>内容 3</li>
  </ul>
</div>

步骤 2：CSS 样式

接下来，我们需要为我们的跑马灯效果定义一些CSS样式。首先，我们需要使用CSS选择器来定位我们的容器元素，并为其设置一些基本样式，例如背景颜色、内边距等。然后，我们需要设置跑马灯的宽度、高度和溢出属性，以便我们可以隐藏溢出的内容并实现滚动效果。请参考以下示例代码：

.marquee {
  background-color: #f2f2f2;
  padding: 10px;
  width: 300px;
  height: 30px;
  overflow: hidden;
}

在跑马灯的容器元素内，我们还需要为内容列表项设置一些基本样式，例如行高、字体大小等。此外，我们还需要使用CSS动画来实现内容的滚动效果。请参考以下示例代码：

.marquee ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  line-height: 30px;
  font-size: 16px;
  animation: marquee 10s infinite linear;
}

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

.marquee li {
  display: inline-block;
  padding-right: 50px;
}

在上面的代码中，我们使用了@keyframes规则来定义一个名为marquee的动画。该动画将在10秒内无限次线性播放。在每个关键帧中，我们通过transform属性来实现内容的水平位移效果。通过设置transform: translateX(-100%);，我们将内容向左滚动100%的距离，从而实现滚动效果。此外，我们还设置了内容列表项的display属性为inline-block，以确保内容能够在同一行上显示，并为内容列表项之间添加了一定的间距。

步骤 3： JavaScript 轮播

通过上述 CSS 样式已经能够实现无空白空间的跑马灯效果了。如果您想要自动播放这个跑马灯，并且添加一些用户交互的功能，您可以使用 JavaScript。下面是一个简单的示例代码，展示了如何使用 JavaScript 来实现自动播放的跑马灯效果。

<script>
  // 跑马灯容器
  var marqueeContainer = document.querySelector('.marquee');

  // 内容列表
  var marqueeContent = document.querySelector('.marquee ul');

  // 获取内容列表项的总宽度
  var contentWidth = marqueeContent.offsetWidth;

  // 设置容器宽度和内容滚动范围
  marqueeContainer.style.width = contentWidth + 'px';

  // 设置内容滚动效果
  function startMarquee() {
    marqueeContent.style.animation = 'marquee ' + (contentWidth / 100) + 's infinite linear';
  }

  // 停止内容滚动效果
  function stopMarquee() {
    marqueeContent.style.animation = 'none';
  }

  // 自动播放跑马灯
  startMarquee();

  // 当鼠标悬停在容器上时停止播放，鼠标移开时继续播放
  marqueeContainer.addEventListener('mouseover', stopMarquee);
  marqueeContainer.addEventListener('mouseout', startMarquee);
</script>

通过以上 JavaScript 代码，我们可以实现当鼠标悬停在跑马灯容器上时停止播放内容滚动，鼠标移开时继续播放的功能。

总结

通过本文的介绍，我们学习了如何使用 CSS 创建一个无空白空间的跑马灯效果。通过设置容器的宽度和溢出属性，以及使用 CSS 动画来实现内容的滚动效果，我们可以在网页中循环滚动展示各种内容。如果您想要添加一些用户交互的功能，您还可以使用 JavaScript 来控制跑马灯的播放和停止。希望本文对您有所帮助，谢谢阅读！