div的css3边框动画效果

html:

<div class="wrap">
    <a href="javascript:void(0)">
        <span class="top"></span>
        <span class="right"></span>
        <span class="bottom"></span>
        <span class="left"></span>
    </a>
    <a href="javascript:void(0)">
        <span class="top"></span>
        <span class="right"></span>
        <span class="bottom"></span>
        <span class="left"></span>
    </a>
    <a href="javascript:void(0)">
        <span class="top"></span>
        <span class="right"></span>
        <span class="bottom"></span>
        <span class="left"></span>
    </a>
    <a href="javascript:void(0)">
        <span class="top"></span>
        <span class="right"></span>
        <span class="bottom"></span>
        <span class="left"></span>
    </a>
</div>

css动画1:

.wrap { width: 840px; margin: 50px auto; height: 300px; }
.wrap a { float: left; width: 180px; height: 180px; margin: 10px; border: 2px solid #ccc; position: relative; }
.wrap a .top, .wrap a .right, .wrap a .bottom, .wrap a .left { display: inline-block; position: absolute; background: #ff0000; transition: all .5s ease; }
.wrap a .top { left: -2px; top: -2px; width: 0px; height: 2px; }
.wrap a .right { right: -2px; bottom: 0; width: 2px; height: 0px; }
.wrap a .bottom { bottom: -2px; right: -2px; width: 0px; height: 2px; }
.wrap a .left { left: -2px; top: 0; width: 2px; height: 0px; }
.wrap a:hover .top, .wrap a:hover .bottom { width: 101%; transition: .5s; }
.wrap a:hover .right, .wrap a:hover .left { height: 101%; transition: .5s; }

css动画2:

.wrap { width: 840px; margin: 50px auto; height: 300px; }
.wrap a { float: left; width: 180px; height: 180px; margin: 10px; border: 2px solid #ccc; position: relative; }
.wrap a .top, .wrap a .right, .wrap a .bottom, .wrap a .left { display: inline-block; position: absolute; background: #ff0000;}
.wrap a .top { left: -2px; top: -2px; width: 0px; height: 2px;transition: all .8s ease .7s; }
.wrap a .right { right: -2px; top: 0; width: 2px; height: 0px; transition: all .6s ease .5s;}
.wrap a .bottom { bottom: -2px; right: -2px; width: 0px; height: 2px; transition: all .4s ease .3s;}
.wrap a .left { left: -2px; bottom: 0; width: 2px; height: 0px;transition: all .2s ease .1s; }
.wrap a:hover .top, .wrap a:hover .bottom { width: 101%; }
.wrap a:hover .right, .wrap a:hover .left { height: 101%; }
.wrap a:hover .top{ transition: all .2s ease .1s;width: 102%;}
.wrap a:hover .right{transition: all .4s ease .3s;}
.wrap a:hover .bottom{transition: all .6s ease .5s;width: 102%;}
.wrap a:hover .left{transition: all .8s ease .7s;}

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/572

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！