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>
