div边框css动画

来源：互联网发布：暗黑团队毁魔兽知乎编辑：程序博客网时间：2024/05/22 14:01

效果：

css:

.wrap{            width:840px;            margin:50px auto;            height:300px;        }        .wrap a{            float:left;            width:180px;            height:180px;            margin:10px;            border:2px solid #ddd;            position:relative;        }        .wrap a span{            display:inline-block;            position:absolute;            background:#4A64B4;            transition:.5s;        }        .wrap a span.top{            left:-2px;            top:-2px;            width:0;            height:2px;        }        .wrap a span.right{            right:-2px;            bottom:0;            width:2px;            height:0;        }        .wrap a span.bottom{            bottom:-2px;            right:-2px;            width:0px;            height:2px;        }        .wrap a span.left{            left:-2px;            top:0;            width:2px;            height:0px;        }        .wrap a:hover .top,        .wrap a:hover .bottom{            width:calc(100% + 2px)        }        .wrap a:hover .right,        .wrap a:hover .left{            height:calc(100% + 2px)        }

html：

 <div class="wrap">        <a href="#">            <span class="top"></span>            <span class="right"></span>            <span class="bottom"></span>            <span class="left"></span>        </a>        <a href="#">            <span class="top"></span>            <span class="right"></span>            <span class="bottom"></span>            <span class="left"></span>        </a>        <a href="#">            <span class="top"></span>            <span class="right"></span>            <span class="bottom"></span>            <span class="left"></span>        </a>        <a href="#">            <span class="top"></span>            <span class="right"></span>            <span class="bottom"></span>            <span class="left"></span>        </a>    </div>

阅读全文

0 0