卡卡網(wǎng)

本文介紹一個純CSS實現(xiàn)的幻燈片/輪播效果。

此幻燈片的設(shè)計更側(cè)重于高級動畫。

demodownload

設(shè)置輪播內(nèi)容

輪播幻燈片上的文字可在html里設(shè)置。

<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里設(shè)置輪播幻燈片的文字，本實例中共有4個輪播內(nèi)容。

設(shè)置輪播圖片

輪播圖片是在CSS里設(shè)置。

.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();就是設(shè)置各個輪播圖片。animation-delay設(shè)置的是輪播間隔時間（秒）。

您可能對以下文章也感興趣

• 使用 HTML、CSS 和 JavaScript 創(chuàng)建幻燈片

標簽: 幻燈片  輪播