CSS3实现轮播效果

/* 设置轮播容器样式 */
.carousel {
  width: 600px;
  height: 300px;
  position: relative;
  overflow: hidden;
}
 
/* 设置图片列表样式 */
.carousel ul {
  position: absolute;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 3000px; /* 假设有3张图片，每张图片宽度600px，总宽度3000px */
  animation: slide 10s infinite; /* 动画名称为slide，持续时间10秒，无限循环 */
}
 
/* 设置单个图片样式 */
.carousel ul li {
  float: left;
  width: 600px;
  height: 300px;
}
 
/* 设置图片轮播动画 */
@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-600px); /* 每次动画结束，向左移动一张图片的宽度 */
  }
}
 
/* 样式应用于HTML结构 */
<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>
  </ul>
</div>

这个代码实例展示了如何使用CSS3的@keyframes规则创建一个简单的图片轮播效果。.carousel是轮播容器，.carousel ul是所有图片的列表，.carousel ul li是单个图片的容器。@keyframes slide定义了图片从左至右移动的动画效果。这个例子中，图片每10秒向左移动一张宽度的距离，形成轮播效果。