1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>使用CSS3实现百叶窗</title> 6 <meta name="keywords" content="" /> 7 <meta name="description" content="" /> 8 9 <style> 10 *{margin:0;padding:0;} 11 body{} 12 ul,li{list-style:none;} 13 #banner{width:800px;height:500px;margin:60px auto;border:3px solid #082323;position:relative; } 14 #banner .pic li{width:200px;height:500px;float:left;position:relative;overflow:hidden;} 15 #banner .pic li div{width:200px;height:500px;position:absolute;left:-200px;} 16 17 #banner .pic li div:nth-child(1){background-image:url("images/1.jpg");} 18 #banner .pic li div:nth-child(2){background-image:url("images/2.jpg");} 19 #banner .pic li div:nth-child(3){background-image:url("images/3.jpg");} 20 #banner .pic li div:nth-child(4){background-image:url("images/4.jpg");} 21 22 #banner .pic li:nth-child(1) div{background-position:0;} 23 #banner .pic li:nth-child(2) div{background-position:-200px;} 24 #banner .pic li:nth-child(3) div{background-position:-400px;} 25 #banner .pic li:nth-child(4) div{background-position:-600px;} 26 27 input{display:none;} /*隐藏radio按钮*/ 28 label{display:block;width:20px;height:20px;background:#999;z-index:2; 29 border-radius:100%;color:#fff;position:absolute;bottom:15px; 30 text-align:center;line-height:20px; 31 } 32 label:nth-child(2) {right:100px;} 33 label:nth-child(4) {right:70px;} 34 label:nth-child(6) {right:40px;} 35 label:nth-child(8) {right:10px;} 36 input:checked + label{background:#0A7979;} /*+获取紧邻兄弟元素加上背景*/ 37 38 /*~获取相邻兄弟改变div的位置*/ 39 input#ra1:checked ~ .pic li div:nth-child(1){left:0;transition:0.6s;} 40 input#ra2:checked ~ .pic li div:nth-child(2){left:0;transition:0.6s;} 41 input#ra3:checked ~ .pic li div:nth-child(3){left:0;transition:0.6s;} 42 input#ra4:checked ~ .pic li div:nth-child(4){left:0;transition:0.6s;} 43 44 </style> 45 </head> 46 <body> 47 48 <div id="banner"> 49 50 <input type="radio" id="ra1" name="choose" checked><label for="ra1">1</label> 51 <input type="radio" id="ra2" name="choose"><label for="ra2">2</label> 52 <input type="radio" id="ra3" name="choose"><label for="ra3">3</label> 53 <input type="radio" id="ra4" name="choose"><label for="ra4">4</label> 54 55 <ul class="pic"> 56 <li><div></div><div></div><div></div><div></div></li> 57 <li><div></div><div></div><div></div><div></div></li> 58 <li><div></div><div></div><div></div><div></div></li> 59 <li><div></div><div></div><div></div><div></div></li> 60 </ul> 61 </div> 62 63 </body> 64 </html>