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;
    }
}

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

agrilmida - 31/03/2021

[url=https://vsdoxycyclinev.com/]buy doxycycline uk[/url]

agrilmida - 16/12/2020

Kamagra Apotheke Berlin Busiaimall [url=https://bansocialism.com/]cheapest cialis available[/url] suemGesy Tadalis Sx Soft And Generique

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