css3鼠标悬停图片边框线条动画特效

css3鼠标经过内容区时，边框线条特效效果制作。

 

html:

<div class="strength grWidth hidden">
    <div class="homeTitle">
        <h2>为什么选择优胜空间？</h2>
    </div>
    <ul class="strengthMain">
        <li><a href="#"><img src="data:images/a1.jpg" alt="专业团队"><div class="font"><h3>专业团队</h3><p>面积1900平，成员300人，很可能是常德最大的一支网站信息建设服务团队</p></div></a></li>
        <li><a href="#"><img src="data:images/a2.jpg" alt="项目管理"><div class="font"><h3>项目管理</h3><p>项目式实施，确保创意与策略可靠落地</p></div></a></li>
        <li><a href="#"><img src="data:images/a3.jpg" alt="丰富经验"><div class="font"><h3>丰富经验</h3><p>12年行业经验，累计帮助超过千家企业建设了官方网站</p></div></a></li>
        <li><a href="#"><img src="data:images/a4.jpg" alt="技术支持"><div class="font"><h3>售后无忧</h3><p>7X24小时VIP服务专线，直通技术支持</p></div></a></li>
    </ul>
</div>

css:

/* CSS活动的公共样式 */
.fl{float:left;}
.fr{float:right;}
.gr_center{text-align:center;}
.grWidth{width:1200px; margin:0 auto;}
.mb10{margin-bottom:10px;}
.mb15{margin-bottom:15px;}
.center{text-align:center;}
.hidden{overflow:hidden;}
.nor{font-weight:normal;}

/*  标题 */
.homeTitle {text-align: center;margin-bottom: 35px;text-transform: uppercase;line-height: 40px;}
.homeTitle h2 {font-size: 36px;color: #FF0000;font-weight: normal;}
.strength{padding-top:60px;}
.strengthMain{height:;overflow:hidden;}
.strengthMain li{float:left;width:600px;height:330px;overflow:hidden;background:#000;position:relative;}
.strengthMain li img{width:600px;height:330px;transition:all .5s;opacity:0.4;filter:alpha(opacity=40);}
.strengthMain li .font{width:600px;height:205px;top:0;left:0;position:absolute;color:#fff;text-align:center;font-size:16px;padding-top:125px;}
.strengthMain li .font h3{font-size:36px;color:#fff;font-weight:normal;margin-bottom:20px;line-height:36px;}
.strengthMain li:hover img{transform: scale(1.05, 1.05);}
/*以下代码比较重要，是动画形成的重要关键一步*/
.strengthMain li .font::before,.strengthMain li .font::after{position:absolute;content:'';opacity:0;transition:all 0.5s;}
.strengthMain li .font::before{top:25px;right:15px;bottom:25px;left:15px;border-top:1px solid #fff;border-bottom:1px solid #fff;transform:scale(0,1);-webkit-transform-origin:0 0;transform-origin:0 0}
.strengthMain li .font::after{top:15px;right:25px;bottom:15px;left:25px;border-right:1px solid #fff;border-left:1px solid #fff;transform:scale(1,0);transform-origin:100% 0;}
.strengthMain li:hover .font::before,.strengthMain li:hover .font::after{opacity:1;transform:scale(1);transition: all 0.5s;}