css幻灯片跑马灯

CSS幻灯片跑马灯可以用来展示多张图片或内容，并能够自动滚动切换。下面我们来介绍如何实现这一功能。

/* HTML结构 */div class="slider">
      ul class="slides">
        li>
    img src="img/slide1.jpg" alt="Slide 1">
    /li>
        li>
    img src="img/slide2.jpg" alt="Slide 2">
    /li>
        li>
    img src="img/slide3.jpg" alt="Slide 3">
    /li>
      /ul>
    /div>
/* CSS样式 */.slider {
      position: relative;
      width: 100%;
      overflow: hidden;
}
.slides {
      position: absolute;
      top: 0;
      left: 0;
      width: 300%;
 /* 这里的宽度根据幻灯片数量而定，比如3张就是300% */}
.slides li {
      float: left;
      width: 33.333%;
 /* 每个li的宽度为整个幻灯片宽度的1/3 */}
/* 这里用keyframes来实现自动滚动 */@keyframes slider {
  0% {
        left: 0;
  }
  20% {
        left: 0;
  }
  25% {
        left: -100%;
  }
  45% {
        left: -100%;
  }
  50% {
        left: -200%;
  }
  70% {
        left: -200%;
  }
  75% {
        left: -300%;
  }
  95% {
        left: -300%;
  }
  100% {
        left: 0;
  }
}
/* 开始滚动 */.slides {
      animation: slider 10s infinite;
}
    

代码分为HTML和CSS两部分。HTML中包含一个className为slider的div和一个className为slides的ul，里面包含了所有的li和图片。CSS中设置了.slider的一些基本样式，.slides的绝对定位和宽度，以及每个li的宽度。在slides的样式中，我们使用了keyframes来实现自动滚动，最后在.slides样式中将此属性添加进去。

这样，我们就能实现一个简单的CSS幻灯片跑马灯了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！