Pure CSS3 shutter-type Toggle Carousel Chart effect

Brief tutorials

This is a shutter-type switching tut effect made with pure CSS3. This effect is created using a background image, which is cool when the carousel is toggled with a set of DIV elements to make the blinds.

How to use

HTML structure

6 background images are used in this carousel effect, and the HTML structure is as follows:

<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 img 1 "> <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" ></d iv> <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> </d iv> <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>

In addition, 6 radio buttons are used as toggle buttons for the Carousel diagram:

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

The basic CSS style of the Carousel diagram is as follows:

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

The background picture style used in the Carousel diagram is as follows:

. img1. Frag {background-image:url (1.jpg)}.img2. Frag {background-image:url (2.jpg)}.img3. Frag {Background-image:ur L (3.jpg)}.img4. Frag {background-image:url (4.jpg)}.img5. Frag {background-image:url (5.jpg)}.img6. Frag {background -image:url (6.jpg)}

The CSS style of the Carousel control button is as follows:

#slide1: Checked ~. Slider. img1. Frag, #slide2: Checked ~. Slider. Img2. Frag, #slide3: Checked ~. Slider img3. Frag, #slid e4:checked ~. Slider. Img4. Frag, #slide5: Checked ~. Slider img5. Frag, #slide6: Checked ~. Slider Img6. frag {transfor  M: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)}

Finally, set the CSS style for the picture title:

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

The above is the pure CSS3 shutter-type switch carousel graphics effect content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

