纯CSS实现动态加载矩形边线的动画效果

制作web动画效果，通常会想到使用svg或者canvas甚至flash，其实一些简单的动画效果，使用css3属性transition就可以实现，比如动态显示矩形边框线的效果，实现原因是利用过渡效果时宽高显示的时间差。

示意图

实现代码

HTML代码：

<div class="border">
</div>

CSS代码：

.border {position: relative; width:300px; height:300px;}
.border:before,
.border:after {content: ''; display: block; width: 0; height: 0; position: absolute; z-index: 2;margin: 10px; visibility: hidden;}
.border:hover:before,
.border:hover:after {visibility: visible;width: calc(100% - 22px); height: calc(100% - 22px);}
.border:before { top: 0px; left: 1px; border-top:1px solid #000; border-right: 1px solid #000;  transition:visibility .1s linear .6s,height .1s linear .5s,width .1s linear .6s; }
.border:hover:before { transition:visibility .1s linear 0s, width .1s linear 0s,height .1s linear .2s;}
.border:after {border-left: 1px solid #000; border-bottom: 1px solid #000; right: 1px; bottom: 1px;transition:visibility .1s linear .3s,height .1s linear .2s,width .1s linear .3s;}
.border:hover:after {transition:visibility .1s linear .3s, width .1s linear .3s,height .1s linear .4s;}

效果演示

把鼠标移动到下面的灰色矩形中查看效果