javascript - 这个描边动画效果是怎么实现的呢？

鼠标悬停在上面就会出现这个类似描边效果，纯css可以实现吗？想实现一样的效果具体怎么弄呢？

学习ing2759 天前948

全部回复(3)我来回复

欧阳克2017-06-24 09:46:08

开始我想尝试用伪类来实现，但z-index好像没办法处理，所以就这样模拟了。
demo

<style type="text/css">
.btn{
    position: relative;
    height: 45px;
    width: 200px;
    background: #fff;
    color: #6cf;
    text-align: center;
    line-height: 45px;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    margin: 0 auto;
    border: 1px solid #ccc;
}

.b-l{
    position: absolute;
    content: "";
    display: block;
    width: 0px;
    height: 1px;
    left: -1px;
    top: -2px;
    background: #6cf;
    z-index: -1;
    -webkit-transition:width 1s linear 2s,height 0.5s linear 1.5s;
    transition:width 1s linear 2s,height 0.5s linear 1.5s;
}

.b-r{
    position: absolute;
    content: "";
    display: block;
    width: 0px;
    height: 1px;
    right: -1px;
    bottom: -2px;
    background: #6cf;
    z-index: -1;
    -webkit-transition:width 1s linear 0.5s,height 0.5s linear;
    transition:width 1s linear 0.5s,height 0.5s linear;
}

.btn:hover .b-l{
    -webkit-transition:width 1s linear,height 0.5s linear 1s;
    transition:width 1s linear,height 0.5s linear 1s;
    width: 201px;
    height: 46px;
}

.btn:hover .b-r{
    -webkit-transition:width 1s linear 1.5s,height 0.5s linear 2.5s;
    transition:width 1s linear 1.5s,height 0.5s linear 2.5s;
    width: 201px;
    height: 46px;
}
</style>
<body>
<p class="btn">
    <p class="b-l"></p>
    <p class="b-r"></p>
    btn
</p>
</body>

代言2017-06-24 09:46:08

可以实现主要依靠animation-delay属性，可以自行搜索下

習慣沉默2017-06-24 09:46:08

是SVG吧。

取消回复