10.扇子打开闭合效果---动图

HTML:

 1 <!DOCTYPE html>
 2 <head>
 3     <meta charset="utf-8"/>
 4     <title>demo005</title>
 5     <link type="text/css" href="E:\htmltest1\demo1\demo005.css" rel="stylesheet">
 6 </head>
 7 <body>
 8     <div class="zs">
 9         <div>1</div>
10         <div>2</div>
11         <div>3</div>
12         <div>4</div>
13         <div>5</div>
14         <div>6</div>
15         <div>7</div>
16         <div>8</div>
17         <div>9</div>
18         <div>10</div>
19         <div>11</div>
20         <div>12</div>
21         <div>13</div>
22     </div>
23 </body>
View Code

 

CSS:

 1 *{margin:0;padding:0;}
 2 .zs{
 3     width:600px;
 4     height:340px;    
 5     margin:100px auto;
 6     border-bottom:2px solid black;
 7 }
 8 .zs div{
 9     width:60px;
10     height:200px;
11     position:absolute;
12     left:47%;
13     top:206px;
14     transform-origin:bottom center;
15     box-shadow:3px 3px 5px #333;
16     transition: all 2s linear;
17 }
18 
19 .zs div:nth-of-type(1){background:red;}
20 .zs div:nth-of-type(2){background:green;}
21 .zs div:nth-of-type(3){background:#CCFF33;}
22 .zs div:nth-of-type(4){background:#6600FF;}
23 .zs div:nth-of-type(5){background:#99FFFF;}
24 .zs div:nth-of-type(6){background:#FF00FF;}
25 .zs div:nth-of-type(7){background:#FF9900;}
26 .zs div:nth-of-type(8){background:green;}
27 .zs div:nth-of-type(9){background:#CCFF33;}
28 .zs div:nth-of-type(10){background:#6600FF;}
29 .zs div:nth-of-type(11){background:#99FFFF;}
30 .zs div:nth-of-type(12){background:#FF00FF;}
31 .zs div:nth-of-type(13){background:#FF9900;}
32 
33 .zs:hover div:nth-of-type(2){transform:rotate(15deg)}
34 .zs:hover div:nth-of-type(3){transform:rotate(30deg)}
35 .zs:hover div:nth-of-type(4){transform:rotate(45deg)}
36 .zs:hover div:nth-of-type(5){transform:rotate(60deg)}
37 .zs:hover div:nth-of-type(6){transform:rotate(75deg)}
38 .zs:hover div:nth-of-type(7){transform:rotate(90deg)}
39 .zs:hover div:nth-of-type(8){transform:rotate(-15deg)}
40 .zs:hover div:nth-of-type(9){transform:rotate(-30deg)}
41 .zs:hover div:nth-of-type(10){transform:rotate(-45deg)}
42 .zs:hover div:nth-of-type(11){transform:rotate(-60deg)}
43 .zs:hover div:nth-of-type(12){transform:rotate(-75deg)}
44 .zs:hover div:nth-of-type(13){transform:rotate(-90deg)}
View Code

 

效果：

 

posted @ 2023-11-09 14:31  种太阳  阅读(11)  评论(0)  编辑  收藏  举报