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>