旋转木马 CSS —— 简单实现，惊艳视觉

2023-09-24 10:11:29

使用 CSS3 动画打造迷人旋转木马效果

欢迎来到网页设计世界的奇妙殿堂！今天，我们将踏上一段迷人的旅程，学习如何使用 CSS3 动画创建一个旋转木马效果。旋转木马是一个简单却引人注目的网页元素，可以为你的网站增添趣味和互动性。

创建你的 HTML 画布

首先，我们需要创建一个 HTML 画布来展示我们的旋转木马。使用你最喜欢的文本编辑器创建一个新的 HTML 文件，并添加以下代码：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="carousel">
    <ul>
      <li><img src="image1.jpg" alt="Image 1"></li>
      <li><img src="image2.jpg" alt="Image 2"></li>
      <li><img src="image3.jpg" alt="Image 3"></li>
      <li><img src="image4.jpg" alt="Image 4"></li>
    </ul>
  </div>

  <script src="script.js"></script>
</body>
</html>

在这里，我们创建了一个 <div> 元素作为我们的旋转木马容器，并添加了一个 <ul> 元素来容纳我们的图片。每个 <li> 元素都包含一张图像，作为我们旋转木马的滑块。

用 CSS 点缀你的旋转木马

现在，让我们用 CSS 为我们的旋转木马增添一些视觉魅力。创建一个新的 CSS 文件，并添加以下代码：

.carousel {
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.carousel ul {
  width: 100%;
  height: 100%;
  list-style-type: none;
  position: relative;
}

.carousel li {
  float: left;
  width: 25%;
  height: 100%;
}

.carousel li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel ul:hover {
  animation: carousel 15s infinite linear;
}

@keyframes carousel {
  0% {
    left: 0;
  }

  100% {
    left: -75%;
  }
}

在这个 CSS 代码中，我们设置了旋转木马的尺寸和溢出行为，确保它不会超出其容器。我们还设置了滑块的宽度和高度，并使用 CSS3 动画 keyframes 定义了旋转效果。当鼠标悬停在旋转木马容器上时，动画就会触发，让滑块流畅地向左移动。

让旋转木马动起来

为了使旋转木马动态化，我们需要添加一些 JavaScript 代码。在你的脚本文件中，添加以下代码：

const carousel = document.querySelector('.carousel');

carousel.addEventListener('mouseover', () => {
  carousel.classList.add('active');
});

carousel.addEventListener('mouseout', () => {
  carousel.classList.remove('active');
});

这段 JavaScript 代码为旋转木马容器添加了事件侦听器。当鼠标悬停在容器上时，它会添加 active 类，触发 CSS 动画。当鼠标离开容器时，它会删除 active 类，停止动画。

自定义你的旋转木马

恭喜你！你已经成功创建了一个旋转木马效果。现在，你可以根据你的喜好进行自定义。通过调整 CSS 代码，你可以更改旋转木马的尺寸、颜色和动画速度。你还可以添加更多滑块或使用不同的图像。

常见问题

如何更改旋转木马的尺寸？
编辑 CSS 文件，修改 .carousel 容器的 width 和 height 属性。
如何添加更多滑块？
在 <ul> 元素中添加更多 <li> 元素，每个 <li> 元素都包含一个图像。
如何更改动画速度？
在 CSS 文件中修改 animation-duration 属性的值。
如何让旋转木马自动播放？
将 animation-play-state 属性设置为 running，并在 CSS 文件中删除 :hover 触发器。
如何使用不同的图像？
只需替换 <li> 元素中的 src 属性值即可。