国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

首頁 > web前端 > css教程 > 正文

純CSS3百葉窗式切換輪播圖特效

黃舟
發(fā)布： 2017-01-18 13:48:10
原創(chuàng)
2105人瀏覽過

簡要教程

這是一款使用純CSS3制作的百葉窗式切換輪播圖特效。該特效使用背景圖片來制作，在輪播圖切換時(shí)，通過一組div元素來制作百葉窗效果，非常的炫酷。

使用方法

?HTML結(jié)構(gòu)

該輪播圖特效中使用了6張背景圖片，HTML結(jié)構(gòu)如下：

<div class="slider">
  <div class="captions">
    <div class="c1">duzy fiat</div>
    <div class="c2">syrenka</div>
    <div class="c3">wartburg</div>
    <div class="c4">warszawa</div>
    <div class="c5">wolga</div>
    <div class="c6">polonez</div>
  </div>
  <div class="img img1">
    <div class="frag frag1"></div>
    <div class="frag frag2"></div>
    <div class="frag frag3"></div>
    <div class="frag frag4"></div>
    <div class="frag frag5"></div>
    <div class="frag frag6"></div>
  </div>
  <div class="img img2">
    <div class="frag frag1"></div>
    <div class="frag frag2"></div>
    <div class="frag frag3"></div>
    <div class="frag frag4"></div>
    <div class="frag frag5"></div>
    <div class="frag frag6"></div>
  </div>
  <div class="img img3">
    <div class="frag frag1"></div>
    <div class="frag frag2"></div>
    <div class="frag frag3"></div>
    <div class="frag frag4"></div>
    <div class="frag frag5"></div>
    <div class="frag frag6"></div>
  </div>
  <div class="img img4">
    <div class="frag frag1"></div>
    <div class="frag frag2"></div>
    <div class="frag frag3"></div>
    <div class="frag frag4"></div>
    <div class="frag frag5"></div>
    <div class="frag frag6"></div>
  </div>
  <div class="img img5">
    <div class="frag frag1"></div>
    <div class="frag frag2"></div>
    <div class="frag frag3"></div>
    <div class="frag frag4"></div>
    <div class="frag frag5"></div>
    <div class="frag frag6"></div>
  </div>
  <div class="img img6">
    <div class="frag frag1"></div>
    <div class="frag frag2"></div>
    <div class="frag frag3"></div>
    <div class="frag frag4"></div>
    <div class="frag frag5"></div>
    <div class="frag frag6"></div>
  </div>
</div>
登錄后復(fù)制

另外使用6個(gè)Radio按鈕作為輪播圖的切換按鈕：

<input type="radio" name="slides" id="slide1" checked>
<input type="radio" name="slides" id="slide2">
<input type="radio" name="slides" id="slide3">
<input type="radio" name="slides" id="slide4">
<input type="radio" name="slides" id="slide5">
<input type="radio" name="slides" id="slide6">
登錄后復(fù)制

CSS樣式

輪播圖的基本CSS樣式如下：

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

.slider, .img {
  width: inherit;
  height: inherit;
}
.slider {
  position: relative;
  overflow: hidden;
  background-color: #000;
  border: 8px solid #eee;
  border-radius: 5px;
  box-shadow: 0 7px 20px rgba(0,0,0,.5);
}
.img {
  position: absolute;
  margin-left: -8px;
  perspective: 500px;
}
.frag {
  width: 150px;
  height: inherit;
  float: left;
  opacity: 0;
  z-index: 0;
  transform-origin: center right;
  transform: rotateY(90deg) translateZ(100px) scale(1.5);
  transition: transform .6s, opacity .6s, -webkit-filter 2s ease-out;
  -webkit-filter: saturate(0) blur(10px) brightness(.6) contrast(4);
}
.img .frag2 {
  background-position: -150px 0;
  transition-delay: .2s;
}
.img .frag3 {
  background-position: -300px 0;
  transition-delay: .4s;
}
.img .frag4 {
  background-position: -450px 0;
  transition-delay: .6s;
}
.img .frag5 {
  background-position: -600px 0;
  transition-delay: .8s;
}
.img .frag6 {
  background-position: -750px 0;
  transition-delay: 1s;
}
登錄后復(fù)制

輪播圖中使用的背景圖片樣式如下：

.img1 .frag { background-image: url(1.jpg) }
.img2 .frag { background-image: url(2.jpg) }
.img3 .frag { background-image: url(3.jpg) }
.img4 .frag { background-image: url(4.jpg) }
.img5 .frag { background-image: url(5.jpg) }
.img6 .frag { background-image: url(6.jpg) }
登錄后復(fù)制

輪播圖控制按鈕的CSS樣式如下：

#slide1:checked ~ .slider .img1 .frag, #slide2:checked ~ .slider .img2 .frag, #slide3:checked ~ .slider .img3 .frag, 
#slide4:checked ~ .slider .img4 .frag, #slide5:checked ~ .slider .img5 .frag, #slide6:checked ~ .slider .img6 .frag {
  transform: rotateY(0) translateZ(0) scale(1);
  -webkit-filter: saturate(1) blur(0) brightness(1) contrast(1);
  opacity: 1;
  z-index: 1;
}
 
.controls {
  position: absolute;
  bottom: -50px;
  left: 50%;
  margin-left: -115px; /*(6elem30px+5el10px)/2=115px*/
}
 
.controls label {
  display: block;
  height: 10px;
  width: 30px;
  float: left;
  background-color: #000;
  margin-right: 10px;
  cursor: pointer;
  opacity: .2;
  transition: opacity .5s;
}
 
.controls label:hover, .side-controls label:hover, 
#slide1:checked ~ .controls label:nth-of-type(1), 
#slide2:checked ~ .controls label:nth-of-type(2), 
#slide3:checked ~ .controls label:nth-of-type(3), 
#slide4:checked ~ .controls label:nth-of-type(4), 
#slide5:checked ~ .controls label:nth-of-type(5), 
#slide6:checked ~ .controls label:nth-of-type(6) { opacity: .8; }
 
.side-controls label {
  position: absolute;
  display: block;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  top: 50%;
  margin-top: -15px;
  cursor: pointer;
  opacity: .2;
  transition: opacity .5s;
}
 
#slide1:checked ~ .side-controls label:nth-of-type(6), 
#slide2:checked ~ .side-controls label:nth-of-type(1), 
#slide3:checked ~ .side-controls label:nth-of-type(2), 
#slide4:checked ~ .side-controls label:nth-of-type(3), 
#slide5:checked ~ .side-controls label:nth-of-type(4), 
#slide6:checked ~ .side-controls label:nth-of-type(5) {
  left: -40px;
  border-right: 40px solid #000;
}
 
#slide1:checked ~ .side-controls label:nth-of-type(2), 
#slide2:checked ~ .side-controls label:nth-of-type(3), 
#slide3:checked ~ .side-controls label:nth-of-type(4), 
#slide4:checked ~ .side-controls label:nth-of-type(5), 
#slide5:checked ~ .side-controls label:nth-of-type(6), 
#slide6:checked ~ .side-controls label:nth-of-type(1) {
  right: -40px;
  border-left: 40px solid #000;
}
 
#slide2:checked ~ .slider .captions .c2, 
#slide1:checked ~ .slider .captions .c1, 
#slide3:checked ~ .slider .captions .c3, 
#slide4:checked ~ .slider .captions .c4, 
#slide5:checked ~ .slider .captions .c5, 
#slide6:checked ~ .slider .captions .c6 { text-shadow: 0 0 0 rgba(255,255,255,.9) }
登錄后復(fù)制

最后為圖片標(biāo)題設(shè)置CSS樣式：

.captions > div {
  position: absolute;
  right: 20px;
  bottom: 7px;
  color: transparent;
  text-shadow: 0 0 60px transparent;
  font-size: 3em;
  z-index: 1;
  text-transform: uppercase;
  transition: text-shadow 2s;
}
登錄后復(fù)制

以上就是純CSS3百葉窗式切換輪播圖特效的內(nèi)容，更多相關(guān)內(nèi)容請(qǐng)關(guān)注PHP中文網(wǎng)（m.miracleart.cn）！

最佳 Windows 性能的頂級(jí)免費(fèi)優(yōu)化軟件
最佳 Windows 性能的頂級(jí)免費(fèi)優(yōu)化軟件

每個(gè)人都需要一臺(tái)速度更快、更穩(wěn)定的 PC。隨著時(shí)間的推移，垃圾文件、舊注冊(cè)表數(shù)據(jù)和不必要的后臺(tái)進(jìn)程會(huì)占用資源并降低性能。幸運(yùn)的是，許多工具可以讓 Windows 保持平穩(wěn)運(yùn)行。

下載
來源：php中文網(wǎng)
本文內(nèi)容由網(wǎng)友自發(fā)貢獻(xiàn)，版權(quán)歸原作者所有，本站不承擔(dān)相應(yīng)法律責(zé)任。如您發(fā)現(xiàn)有涉嫌抄襲侵權(quán)的內(nèi)容，請(qǐng)聯(lián)系admin@php.cn
最新問題
開源免費(fèi)商場系統(tǒng)廣告
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://m.miracleart.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)