css学习：轮播图

创建一个简单的CSS轮播图可以通过使用@keyframes动画和animation属性来实现。以下是一个基本的例子：

HTML:

<div class="slider">
  <div class="slide active">1</div>
  <div class="slide">2</div>
  <div class="slide">3</div>
</div>

CSS:

.slider {
  position: relative;
  overflow: hidden;
  height: 300px;
}
 
.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  display: none;
  animation-name: slideShow;
  animation-duration: 3s;
  animation-timing-function: steps(1);
  animation-iteration-count: infinite;
}
 
.slide.active {
  display: block;
  animation-play-state: running;
}
 
/* 动画 */
@keyframes slideShow {
  0% {
    transform: translateY(0);
  }
  33% {
    transform: translateY(-100%);
  }
  66% {
    transform: translateY(-200%);
  }
  100% {
    transform: translateY(-300%);
  }
}

这个例子中，.slider是包含轮播图的容器，.slide是每张幻灯片的类。通过animation-name引用@keyframes定义的动画，每张幻灯片会平行移动显示。这个例子使用了steps(1)来实现幻灯片的切换效果，每次只移动一个单位。这个例子中假设有三张幻灯片，实际使用时可以根据需要添加更多的幻灯片。