SVG Line Drawing Animation | SVG Stroke Animation With HTML and CSS

Hôm nay mình sẽ giới thiệu cho các bạn một hiệu ứng SVG Line Drawing Animation đơn giản chỉ bằng CSS3 nhưng không kém phần ấn tượng.
<svg version="1.1" id="text-effect" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
    <path class="draw" d="M512,103c-32.2,1.5-31.5,1.4-35.1,1.7l19.1-54.5c0,0-59.5,21.9-74.6,25.8c-39.6-35.6-98.6-37.2-140.7-11.3
        c-34.5,21.2-53,57.6-46.8,100.2c-67.1-9.3-123.7-41.1-168.4-94.8l-14.1-17L40.7,72.5C27.4,97,23,125,28.3,151.3
        c2.2,10.8,5.9,21.1,11,30.8l-12.1-4.7l-1.4,20.2c-1.5,20.6,5.4,44.6,18.3,64.2c3.6,5.5,8.3,11.6,14.3,17.6l-6.3-1l7.6,23.2
        c10,30.5,30.9,54.1,58,67.2c-27,11.5-48.9,18.8-84.8,30.6L0,410.3l30.3,16.6c11.6,6.3,52.4,27.4,92.8,33.8
        C212.9,474.7,314,463.3,382,402c57.3-51.6,76.1-125,72.2-201.4c-0.6-11.6,2.6-22.6,8.9-31.1C475.9,152.5,511.9,103.1,512,103z
         M439.2,151.5c-10.5,14.1-15.8,32-14.9,50.6c3.9,77.1-17,136.8-62.3,177.6c-52.9,47.7-138.3,66.4-234.2,51.3
        c-17.4-2.7-35.3-8.8-50.2-14.9c30.1-10.4,53.3-19.6,90.9-37.4l52.4-24.8l-57.9-3.7c-27.7-1.8-50.8-15.2-65-37
        c7.5-0.4,14.8-1.7,22-3.7l55.2-15.4l-55.6-13.6c-27-6.6-42.4-22.8-50.6-35.2c-5.4-8.2-8.9-16.5-11-24.2c5.6,1.5,12.1,2.6,22.6,3.6
        l51.5,5.1l-40.8-31.8c-29.4-22.9-41.2-57.4-32.5-90.5c91.8,95.2,199.5,88,210.3,90.5c-2.4-23.2-2.4-23.2-3.1-25.4
        c-13.9-49.1,16.5-74,30.3-82.5C325,72.6,370.5,69.9,402,99c6.8,6.3,16,8.7,24.6,6.6c7.7-1.9,14.1-4,20.3-6.2L434,136.3l16.5,0
        C447.4,140.5,443.7,145.5,439.2,151.5z"/>
</svg>

#text-effect {
    width: 100px;
    .draw {
        stroke: #000;
        stroke-width:2px;
        fill:transparent;
        stroke-dasharray: 2000;
        stroke-dashoffset: 2000;
        -webkit-animation: animation 5s forwards;
                animation: animation 5s forwards;
    }
}
@-webkit-keyframes animation {
    to {
        stroke-dashoffset: 0;
    }
}
@keyframes animation {
    to {
        stroke-dashoffset: 0;
    }
}

0 thảo luận về SVG Line Drawing Animation | SVG Stroke Animation With HTML and CSS

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