[分享]css3怎么实现走马灯轮播效果

走马灯轮播效果是网站中常见的一种效果，可以使网页内容更加生动活泼。使用CSS3可以轻松地实现这种效果。 图片1 图片2 图片3 图片4 首先，我们需要一个包含轮播内容的父容器，内部放置一个，每个...

走马灯轮播效果是网站中常见的一种效果，可以使网页内容更加生动活泼。使用CSS3可以轻松地实现这种效果。

<div class="carousel">
  <ul>
    <li>图片1</li>
    <li>图片2</li>
    <li>图片3</li>
    <li>图片4</li>
  </ul>
</div> 

首先，我们需要一个包含轮播内容的父容器，内部放置一个

，每个
• 就是一个轮播项。

  .carousel {
    width: 100%;
    height: 300px;
    overflow: hidden;
  }
  
  ul {
    width: 400%;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    animation: carousel 20s infinite;
  }
  
  li {
    float: left;
    width: 25%;
    height: 100%;
  }
  
  @keyframes carousel {
    0% {
      transform: translateX(0);
    }
    20% {
      transform: translateX(0);
    }
    25% {
      transform: translateX(-25%);
    }
    45% {
      transform: translateX(-25%);
    }
    50% {
      transform: translateX(-50%);
    }
    70% {
      transform: translateX(-50%);
    }
    75% {
      transform: translateX(-75%);
    }
    95% {
      transform: translateX(-75%);
    }
    100% {
      transform: translateX(0);
    }
  } 

  CSS代码的主要部分是设置和

  的样式。其中，父容器设置了height和overflow:hidden，以控制容器高度和溢出部分的处理。子元素
  的宽度设置为400%，而每个
  • 的宽度为25%，这样就可以同时显示4个轮播项。

    动画效果使用CSS3的关键帧动画（animation），设置了轮播效果的各个阶段。可以自行调整各个阶段的时间和偏移量，来实现不同的效果。

    最终实现效果就是，轮播项无限循环滚动，整个效果非常流畅。