纯CSS实现的幻灯片/轮播效果【高级动画】

本文介绍一个纯CSS实现的幻灯片/轮播效果。

此幻灯片的设计更侧重于高级动画。

demodownload

设置轮播内容

轮播幻灯片上的文字可在html里设置。

<div class="untitled">
  <div class="untitled__slides">
    <div class="untitled__slide">
      <div class="untitled__slideBg"></div>
      <div class="untitled__slideContent">
        <span>London</span> 
        <span>Scout</span>
        <a class="button" href="#" >Unsplash Profile</a>
      </div>
    </div>
    <div class="untitled__slide">
      <div class="untitled__slideBg"></div>
      <div class="untitled__slideContent">
        <span>Vladimir</span> 
        <span>Kudinov</span>
        <a class="button" href="#" >Unsplash Profile</a>
      </div>
    </div>
    <div class="untitled__slide">
      <div class="untitled__slideBg"></div>
      <div class="untitled__slideContent">
        <span>Macio</span>        
        <span>Amorim</span>
        <a class="button" href="#" >Unsplash Profile</a>
      </div>
    </div>
    <div class="untitled__slide">
      <div class="untitled__slideBg"></div>
      <div class="untitled__slideContent">
        <span>Mario</span> 
        <span>Calvo</span>
        <a class="button" href="#" >Unsplash Profile</a>
      </div>
    </div>
  </div>
  <div class="untitled__shutters"></div>
</div>

可在<div class="untitled__slideContent">这个div里设置轮播幻灯片的文字，本实例中共有4个轮播内容。

设置轮播图片

轮播图片是在CSS里设置。

.untitled__slide:nth-child(1) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.untitled__slide:nth-child(1) .untitled__slideBg {
  background-image: url(1.jpg);
}
.untitled__slide:nth-child(2) {
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}
.untitled__slide:nth-child(2) .untitled__slideBg {
  background-image: url(2.jpg);
}
.untitled__slide:nth-child(3) {
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
}
.untitled__slide:nth-child(3) .untitled__slideBg {
  background-image: url(3.jpg);
}
.untitled__slide:nth-child(4) {
  -webkit-animation-delay: 15s;
          animation-delay: 15s;
}
.untitled__slide:nth-child(4) .untitled__slideBg {
  background-image: url(4.jpg);
}

CSS代码里的background-image: url();就是设置各个轮播图片。animation-delay设置的是轮播间隔时间（秒）。

您可能对以下文章也感兴趣

• 使用 HTML、CSS 和 JavaScript 创建幻灯片