<1 小玩意(覆盖效果)

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="utf-8" />
 5     <style>
 6     .show1{ animation:show1 0.25s linear;animation-fill-mode: forwards;}
 7     .show2{ animation:show2 0.25s linear 0.25s;animation-fill-mode: forwards;}
 8     .show3{ animation:show3 0.25s linear;animation-fill-mode: forwards;}
 9     .show4{ animation:show4 0.25s linear 0.25s;animation-fill-mode: forwards;}
10     @keyframes show1{
11         0%{ width:0; height:2px; background-color:red}
12         100%{ width:150px; height:2px; background-color:red}
13         }
14     @keyframes show2{
15         0%{ width:2px; height:0; background-color:red}
16         100%{ width:2px; height:148px; background-color:red}
17         }
18     @keyframes show3{
19         0%{ width:2px; height:0; background-color:red}
20         100%{ width:2px; height:148px; background-color:red}
21         }
22     @keyframes show4{
23         0%{ width:0; height:2px; background-color:red}
24         100%{ width:148px; height:2px; background-color:red}
25         }
26     </style>
27 <script src="jquery.js"></script>
28 </head>
29 <body>
30 <div style=" background-color:#CCC; 150px; height:150px; margin:200px 0 0 200px; position:relative" id="f">
31     <div id="child1"></div>
32     <div id="child2" style=" position:absolute;left:148px;"></div>
33     <div id="child3"></div>
34     <div id="child4" style=" position:absolute;top:148px"></div>
35 </div>
36 </body>
37 <script>
38 $("#f").mouseover(function(){
39     $("#child1").addClass("show1");
40     $("#child2").addClass("show2");
41     $("#child3").addClass("show3");
42     $("#child4").addClass("show4");
43     })
44 $("#f").mouseout(function(){
45     $("#child1").removeClass("show1");
46     $("#child2").removeClass("show2");
47     $("#child3").removeClass("show3");
48     $("#child4").removeClass("show4");
49     })
50 </script>
51 </html>