造轮释义：纯 CSS 让轮播图转起来

2023-09-30 11:42:22

HTML 结构与 CSS 样式
我们先从 HTML 结构开始，使用 <ul> 元素来创建轮播图的容器，并将轮播图的幻灯片放在 <li> 元素中。其中，需要为幻灯片添加一个公共类 slide，以便于 CSS 样式的应用。

<ul id="carousel">
  <li class="slide"><img src="image1.jpg" alt="图片1"></li>
  <li class="slide"><img src="image2.jpg" alt="图片2"></li>
  <li class="slide"><img src="image3.jpg" alt="图片3"></li>
</ul>

接下来，我们使用 CSS 样式来为轮播图设置基本样式，包括容器的大小、幻灯片的位置和大小等。

#carousel {
  width: 800px;
  height: 400px;
  overflow: hidden;
  position: relative;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

CSS 动画实现轮播效果

为了实现轮播效果，我们需要使用 CSS 动画。这里，我们将使用 @keyframes 规则来定义动画的关键帧，并通过 animation 属性来将动画应用到幻灯片上。

@keyframes carousel-slide {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide {
  animation: carousel-slide 1s ease-in-out infinite;
  animation-delay: 2s;
}