HTML
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <title>CSS3鼠标滑过动画线条边框特效</title> <link rel="stylesheet" href="css/biankuang_index.css" /> </head> <body style="background:#0a0a3e"> <div class="service"> <ul class="clearfix" > <li> <img src="images/tb10tanjpxxxxblxpxxxxxxxxxx-274-186.png"> <a href=""> <div class="item-box"> <h3>验证码</h3> <h4>三网合一短信，语音通道</h4> <h4>实时，稳定，易用</h4> <h4>≤ 0.045元/条</h4> <div class="overlay-start"></div> <div class="overlay-bottom"></div> <div class="overlay-left"></div> <div class="overlay-top"></div> <div class="overlay-right"></div> </div> </a> </li> <li> <img src="images/tb10tanjpxxxxblxpxxxxxxxxxx-274-186.png"> <a href=""> <div class="item-box"> <h3>验证码</h3> <h4>三网合一短信，语音通道</h4> <h4>实时，稳定，易用</h4> <h4>≤ 0.045元/条</h4> <div class="overlay-start"></div> <div class="overlay-bottom"></div> <div class="overlay-left"></div> <div class="overlay-top"></div> <div class="overlay-right"></div> </div> </a> </li> </ul> </div> </body> </html>
css：
@charset "utf-8"; /*主要CSS*/ a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block} .service li{float:left;width:290px;height:350px;position:relative} .service li img{position:absolute;z-index:999999;} .service li:hover img{display:none;} .service .item-box{position:relative;width:283px;height:361px;padding-left:50px;background:url(../images/tb10tanjpxxxxblxpxxxxxxxxxx-274-186.png) 0 0 no-repeat;color:#00a0ff;zoom:1} .service .overlay-start{position:absolute;bottom:-2px;right:-2px;width:34px;height:10px;background-color:#0a0a3e} .service .overlay-bottom{position:absolute;left:-2px;bottom:-2px;width:287px;height:15px;background-color:#0a0a3e} .service .overlay-left{position:absolute;left:-2px;top:-2px;width:15px;height:359px;background-color:#0a0a3e} .service .overlay-top{position:absolute;right:48px;top:-2px;width:287px;height:15px;background-color:#0a0a3e} .service .overlay-right{position:absolute;right:-2px;bottom:-2px;width:15px;height:350px;background-color:#0a0a3e} .service .service-icon{position:absolute;left:53px;top:35px;width:100px;height:110px;padding-top:12px;background-color:#fff;z-index:11} .service .service-icon .circle{width:80px;height:80px;line-height:80px;background:url(../images/tb1.fjxivxxxxbqxvxxxxxxxxxx-80-80.png) 0 0 no-repeat;text-align:center; color:#359EFB; font-size:28px;} .service .service-icon .iconfont{font-size:32px;color:#00a0ff} .service .start-point{position:absolute;right:-8px;bottom:-3px;width:0;height:16px;background-color:#fff;overflow:hidden} .service .start-point .circle{float:right;width:16px;height:16px;background:url(../images/tb15pjohvxxxxcaxpxxxxxxxxxx-16-16.png) 0 0 no-repeat} .service h3{line-height:52px;font-size:24px;color:#666} .service h4{line-height:27px;font-size:14px;color:#666} .service a:hover h3,.service a:hover h4{color:#00a0ff} .service a:hover .overlay-bottom{ animation:borderslideBottom .15s linear 0s 1; -moz-animation:borderslideBottom .15s linear 0s 1; -webkit-animation:borderslideBottom .15s linear 0s 1; animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; } .service a:hover .overlay-left{ animation:bordersildeLeft .2s linear .15s 1; -moz-animation:bordersildeLeft .2s linear .15s 1; -webkit-animation:bordersildeLeft .2s linear .15s 1; animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; } .service a:hover .overlay-top{ animation:bordersildeTop .15s linear .35s 1; -moz-animation:bordersildeTop .15s linear .35s 1; -webkit-animation:bordersildeTop .15s linear .35s 1; animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; } .service a:hover .overlay-right{ animation:bordersildeRight .2s linear .5s 1; -moz-animation:bordersildeRight .2s linear .5s 1; -webkit-animation:bordersildeRight .2s linear .5s 1; animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; } .service a:hover .start-point{ animation:bordersildeEnd .1s linear .7s 1; -moz-animation:bordersildeEnd .1s linear .7s 1; -webkit-animation:bordersildeEnd .1s linear .7s 1; animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; } .service .arrow{top:357px} .case{position:relative;padding-top:10px;background-color:#fff;zoom:1} .case .arrow{top:183px} @-moz-keyframes slogan{0%{opacity:0;margin-top:0} 100%{opacity:1;margin-top:-30px} } @-webkit-keyframes slogan{0%{opacity:0;margin-top:0} 100%{opacity:1;margin-top:-30px} } @keyframes slogan{0%{opacity:0;margin-top:0} 100%{opacity:1;margin-top:-30px} } @-moz-keyframes clickme{0%{opacity:.2;transform:translate3d(0,-5px,0)} 100%{opacity:.8;transform:translate3d(0,5px,0)} } @-webkit-keyframes clickme{0%{opacity:.2;transform:translate3d(0,-5px,0)} 100%{opacity:.8;transform:translate3d(0,5px,0)} } @keyframes clickme{0%{opacity:.2;transform:translate3d(0,-5px,0)} 100%{opacity:.8;transform:translate3d(0,5px,0)} } @-moz-keyframes borderslideBottom{from{width:295px} to{width:0} } @-webkit-keyframes borderslideBottom{from{width:295px} to{width:0} } @keyframes borderslideBottom{from{width:295px} to{width:0} } @-moz-keyframes bordersildeLeft{from{height:189px} to{height:0} } @-webkit-keyframes bordersildeLeft{from{height:189px} to{height:0} } @keyframes bordersildeLeft{from{height:189px} to{height:0} } @-moz-keyframes bordersildeTop{from{width:295px} to{width:0} } @-webkit-keyframes bordersildeTop{from{width:295px} to{width:0} } @keyframes bordersildeTop{from{width:295px} to{width:0} } @-moz-keyframes bordersildeRight{from{height:189px} to{height:0} } @-webkit-keyframes bordersildeRight{from{height:189px} to{height:0} } @keyframes bordersildeRight{from{height:189px} to{height:0} } @-moz-keyframes bordersildeEnd{from{width:0} to{width:34px} } @-webkit-keyframes bordersildeEnd{from{width:0} to{width:34px} } @keyframes bordersildeEnd{from{width:0} to{width:34px} }