話不多說、靜態(tài)效果圖如下
實(shí)代碼如下
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style> .myDiv{ width: 300px; height: 200px; border: 1px solid rgba(0,0,0,0.2); margin: 50px ; position: relative; } .topLine{ width: 0px; height: 1px; background: black; position:absolute; left: 0; top: -1px; } .bottomLine{ width: 0px; height: 1px; background: black; position:absolute; left: 0; bottom: -1px; } .leftLine{ width: 1px; height: 0px; background: black; position:absolute; left: -1; bottom: -1px; } .rightLine{ width: 1px; height: 0px; background: black; position:absolute; right: -1px; top: -1px; } </style></head><body> <div class="myDiv"> <div class="topLine"></div> <div class="rightLine"></div> <div class="bottomLine"></div> <div class="leftLine"></div> </div> <div class="myDiv"> <div class="topLine"></div> <div class="rightLine"></div> <div class="bottomLine"></div> <div class="leftLine"></div> </div> <script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.js'></script> <script> $(function(){ $(".myDiv").mouseover(function(){ $(this).find(".topLine,.bottomLine").stop().animate({"width":"300px"}); $(this).find(".rightLine,.leftLine").stop().animate({"height":"200px"}); }) $(".myDiv").mouseout(function(){ $(this).find(".topLine,.bottomLine").stop().animate({"width":"0px"}); $(this).find(".rightLine,.leftLine").stop().animate({"height":"0px"}); }) }) </script></body></html>總結(jié)
以上就是這篇文章的全部內(nèi)容了，剛興趣的朋友們可以自己動(dòng)手操作下看看動(dòng)態(tài)效果，真的非常不錯(cuò)，希望對大家的學(xué)習(xí)或者工作能有一定的幫助。如果有疑問大家可以留言交流，小編會(huì)盡快給大家回復(fù)。
新聞熱點(diǎn)
疑難解答
