使用CSS3实现百叶窗 

 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>

 

posted @ 2015-09-17 10:17  悬崖边上  阅读(1483)  评论(0)    收藏  举报