鼠标滑过边框动画效果,使用css3结合jquery。
此效果和代码是早些年最早刚接触c3动画时写的,当年写出它来别有一番成就感呢,所以记忆尤新。哈哈哈哈~~~早些年从不感兴趣这些写文章、管理博客之类的,现在拿出来分享给刚接触动画的小盆友们参考~
先上效果图:
代码如下:
// html
<div class="box">
<img src="images/Swarovski.png" alt="Swarovski施华洛世奇">
<div class="middle">
<a href="#">
<p class="name">施华洛世奇</p>
<div class="blacksline">
<span></span>
</div>
</a>
</div>
<div class="topline" style="width: 0px;"></div>
<div class="rightline" style="height: 0px;"></div>
<div class="bottomline" style="width: 0px;"></div>
<div class="leftline" style="height: 0px;"></div>
</div>
// css
.box{
width:165px;
height:86px;
background:#fff;
position:relative;
border:1px solid #ccc;
float:left;
margin-right:5px;
margin-bottom: 7px;
}
.box img{
width:107px;
height:54px;
display:block;
padding-left:30px;
padding-top:14px;
}
.middle{
width:120px;
height:70px;
background:#fff;
opacity:0;
position: absolute;
top:15px;
left:30px;
}
.middle .name{
text-align: center;
padding-top: 12px;
}
.blacksline{
text-align: center;
margin-top: 5px;
}
.blacksline span{
width:20px;
height:5px;
background:#000;
display: inline-block;
}
.topline{
width:0px;
height:1px;
top:-1px;
left:0px;
background:#000;
position: absolute;
}
.rightline{
width:1px;
height:0px;
bottom:-1px;
right:-1px;
background:#000;
position: absolute;
}
.bottomline{
width:0px;
height:1px;
bottom:-1px;
right:0px;
background:#000;
position: absolute;
}
.leftline{
width:1px;
height:0px;
top:-1px;
left:-1px;
background:#000;
position: absolute;
}
$('.box').mouseover(function(){
$(this).children('.middle').stop().animate({'opacity':'1'}).siblings().animate()
$(this).children('.topline').stop().animate({'width':'165px'}).siblings().animate()
$(this).children('.rightline').stop().animate({'height':'86px'}).siblings().animate()
$(this).children('.bottomline').stop().animate({'width':'165px'}).siblings().animate()
$(this).children('.leftline').stop().animate({'height':'86px'}).siblings().animate()
})
$('.box').mouseout(function(){
$(this).children('.middle').stop().animate({'opacity':'0'}).siblings().animate()
$(this).children('.topline').stop().animate({'width':'0px'}).siblings().animate()
$(this).children('.rightline').stop().animate({'height':'0px'}).siblings().animate()
$(this).children('.bottomline').stop().animate({'width':'0px'}).siblings().animate()
$(this).children('.leftline').stop().animate({'height':'0px'}).siblings().animate()
})