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

簡要教程

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

使用方法

HTML結構

該輪播圖特效中使用了6張背景圖片，HTML結構如下：

<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>

另外使用6個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">

CSS樣式

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

.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;}

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

.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) }

輪播圖控制按鈕的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) }

最後為圖片標題設定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;}

以上就是純CSS3百葉窗式切換輪播圖特效的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！

