svg文字hover动画

2018-06-04

用Svg搭配CSS3创建简单的线条动画。

html代码：

<hgroup class="svg-border-animation">
    <svg viewBox="0 0 320 60" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <rect class="shape" height="60" width="320"></rect>
    </svg>
    <div class="hover-text">HOVER ME</div>
</hgroup>

对应样式：

.svg-border-animation {
    position: absolute;
    width: 320px;
    height: 60px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all .5s;
}

.hover-text {
    position: absolute;
    line-height: 60px;
    width: 320px;
    top: 0;
    color: #333;
    font-size: 28px;
    text-align: center;
    cursor: pointer;
}

.shape {
    fill: transparent;
    stroke-width: 4px;
    stroke: #333;
    stroke-dasharray: 160 520;
    stroke-dashoffset: -460;
}

.svg-border-animation:hover .hover-text {
    transition: 0.5s;
    color: #3F51B5;
}

.svg-border-animation:hover .shape {
    -webkit-animation: draw 0.5s linear forwards;
    animation: draw 0.5s linear forwards;
}

@keyframes draw {
    0% {
        stroke-dasharray: 160 520;
        stroke-dashoffset: -460;
        stroke-width: 4px;
    }
    100% {
        stroke-dasharray: 760;
        stroke-dashoffset: 0;
        stroke-width: 2px;
        stroke: #3F51B5;
    }
}