资讯

News
首页 > 资讯

网站设计CSS3特效之,鼠标经过时边框线运动代码

文章来源:www.cntonet.com 发布日期:2015-01-05

网站设计CSS3特效之,鼠标经过时边框线运动代码。可全部复制到一个新的网页文件测试。


网站设计CSS3特效之,鼠标经过时边框线运动代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery响应式线条滑出列表特效</title>

<script  type="text/javascript"src="js/jquery.min.js"></script>

</head>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
/* box */
.box{width:700px;margin:0 auto;padding-top:50px;height:300px;}
.border_animation{border:1px solid #eee;width:220px;height:260px;float:left;margin-right:10px;position:relative;}
.border_animation .border_top{
 position:absolute;height:1px;width:0;font-size:0;background:#666666;top:0;left:0;
 
 -webkit-transition:all 0.5s ease-out;
 -o-transition:all 0.5s ease-out;
 transition:all 0.5s ease-out;
}
.border_animation .border_right{
 position:absolute;height:0px;width:1px;font-size:0;background:#666666;bottom:0;right:0;
 
 -webkit-transition:all 0.5s ease-out;
 -o-transition:all 0.5s ease-out;
 transition:all 0.5s ease-out;
}
.border_animation .border_bottom{
 position:absolute;height:1px;width:0px;font-size:0;background:#666666;right:0;bottom:0;
 
 -webkit-transition:all 0.5s ease-out;
 -o-transition:all 0.5s ease-out;
 transition:all 0.5s ease-out;
}
.border_animation .border_left{
 position:absolute;height:0px;width:1px;font-size:0;background:#666666;left:0;top:0;
 
 -webkit-transition:all 0.5s ease-out;
 -o-transition:all 0.5s ease-out;
 transition:all 0.5s ease-out;
}
.box .hover .border_top,.box .hover .border_bottom{width:220px}
.box .hover .border_left,.box .hover .border_right{height:260px}
</style>
<body>

<div class="box">

 <div class="border_animation">
 <div class="border_top"></div>
 <div class="border_right"></div>
 <div class="border_bottom"></div>
 <div class="border_left"></div>
 <div><a href="#"><img width="220" height="260" alt="" src="images/1.jpg"></a></div>
 </div>
 
 <div class="border_animation">
 <div class="border_top"></div>
 <div class="border_right"></div>
 <div class="border_bottom"></div>
 <div class="border_left"></div>
 <div><a href="#"><img width="220" height="260" alt="" src="images/2.jpg"></a></div>
 </div>
 
 <div class="border_animation">
 <div class="border_top"></div>
 <div class="border_right"></div>
 <div class="border_bottom"></div>
 <div class="border_left"></div>
 <div><a href="#"><img width="220" height="260" alt="" src="images/3.jpg"></a></div>
 </div>

</div>

<script type="text/javascript">
$(function(){
 $(".border_animation").mouseenter(function(){
 $(this).addClass("hover");
 });
 $(".border_animation").mouseleave(function(){
 $(this).removeClass("hover");
 });
});
</script>

</body>
</html>