javascript - How is this stroke animation effect achieved?
学习ing
学习ing 2017-06-24 09:44:08
0
3
964

This stroke-like effect will appear when the mouse is hovering over it. Can it be achieved with pure CSS? How to achieve the same effect?

学习ing
学习ing

reply all(3)
学霸

At first I wanted to try to use pseudo classes to implement it, but z-index seemed to be unable to handle it, so I simulated it like this.
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>
代言

It can be realized mainly relying on the animation-delay attribute, you can search it by yourself

習慣沉默

It’s SVG.

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template