鼠标滑过边框动画效果,使用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;
marg