SVG Stroke Animation With CSS | SVG Text (Desktop)

Hôm nay mình sẽ giới thiệu cho các bạn một hiệu ứng SVG Stroke Animation đơn giản chỉ bằng CSS3 nhưng không kém phần ấn tượng.
SVG Text
<svg id="text-effect">
    <symbol id="text">
        <text text-anchor="middle" x="50%" y="70%">SVG Text</text>
    </symbol>
    <use xlink:href="#text"></use>
</svg>  

#text-effect {
    font-weight: bold;
    width: 100%;
    height: 350px;
    text-transform: uppercase;
    text {
        font-size: 200px;
        fill:rgba(0,0,0,.1);
        stroke-width:1px;
        stroke: #fff;
        stroke-linejoin: round;
        stroke-dasharray: 80;
        -webkit-animation: anmation 1s linear infinite;
                animation: anmation 1s linear infinite;
    }
}
@-webkit-keyframes anmation {
    100% {
        stroke-dashoffset:160;
    }
}
@keyframes anmation {
    100% {
        stroke-dashoffset:160;
    }
}

0 thảo luận về SVG Stroke Animation With CSS | SVG Text (Desktop)

comment_blank
Hãy để lại #comment của bạn mình sẽ giải đáp thắc mắc một cách sớm nhất có thể.

Bài viết cùng chuyên mục