Icon实现动画效果

new code Boy

已于 2023-10-16 14:48:07 修改

阅读量167

点赞数

文章标签： javascript 前端 html5

于 2023-10-16 14:46:03 首次发布

本文链接：https://blog.csdn.net/qq_46344419/article/details/133858316

版权

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Icon实现动画效果</title>
    </head>

    <body>
        <svg t="1610274780071" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="35827" width="200" height="200">
            <path class="icon-path" stroke="#1875F0" stroke-width="3"
                d="M722.944 501.76h173.568c13.312 0 24.576-10.752 24.576-24.576 0-13.312-10.752-24.576-24.576-24.576h-173.568c-27.136 0-53.76 9.216-75.264 25.088L296.96 734.72c-3.072 2.048-6.144 3.584-9.728 4.096-8.704 1.024-17.408 1.536-26.112 1.536-39.424-1.536-75.776-18.432-102.912-48.128-27.136-30.208-40.448-69.12-37.376-109.056 5.12-69.632 55.808-123.392 121.344-132.608 1.536 29.184 7.68 57.344 18.944 84.48 4.096 9.216 12.8 15.36 22.528 15.36 3.072 0 6.144-0.512 9.216-2.048 12.288-5.12 18.432-19.456 13.312-31.744-10.24-25.088-15.36-51.712-15.36-78.848C290.816 323.584 384 230.4 498.176 230.4c92.672 0 174.592 61.952 199.68 151.04 3.584 12.8 17.408 20.48 30.208 16.896 12.8-3.584 20.48-17.408 16.896-30.208-30.72-110.08-132.096-186.88-246.784-186.88-129.024 0-236.032 95.744-253.44 219.648-93.184 8.192-165.888 82.432-173.056 178.688-3.584 52.736 14.336 105.984 50.176 145.408 35.84 39.936 84.48 62.464 137.728 64.512H266.24c9.728 0 18.944-0.512 28.672-2.048 11.776-1.536 23.04-6.656 32.256-13.312l350.72-257.024c12.288-9.728 28.672-15.36 45.056-15.36zM897.024 740.352h-301.568c-13.312 0-24.576 10.752-24.576 24.576 0 13.312 10.752 24.576 24.576 24.576h301.568c13.312 0 24.576-10.752 24.576-24.576 0-13.824-11.264-24.576-24.576-24.576z"
                fill="#fff" p-id="35828"></path>
            <path class="icon-path" stroke="#1875F0" stroke-width="3"
                d="M643.072 598.016c-13.312 0-24.576 10.752-24.576 24.576 0 13.312 10.752 24.576 24.576 24.576h141.312c13.312 0 24.576-10.752 24.576-24.576 0-13.312-10.752-24.576-24.576-24.576h-141.312zM928.256 598.016h-62.464c-13.312 0-24.576 10.752-24.576 24.576 0 13.312 10.752 24.576 24.576 24.576h62.464c13.312 0 24.576-10.752 24.576-24.576 0-13.312-11.264-24.576-24.576-24.576zM510.464 740.352H448c-13.312 0-24.576 10.752-24.576 24.576 0 13.312 10.752 24.576 24.576 24.576h62.464c13.312 0 24.576-10.752 24.576-24.576 0-13.824-11.264-24.576-24.576-24.576z"
                fill="#fff" p-id="35829"></path>
        </svg>
        <style>
            .icon-path {
                animation: icon-path-animation 8s ease-in infinite;
            }

            @keyframes icon-path-animation {
                0% {
                    stroke-dasharray: 4917;
                    stroke-dashoffset: 4917;
                }

                40% {
                    stroke-dasharray: 4917;
                    stroke-dashoffset: 0;
                    fill: #fff;
                }

                60% {
                    stroke-dasharray: 4917;
                    stroke-dashoffset: 0;
                    fill: #1875F0;
                }

                100% {
                    stroke-dasharray: 4917;
                    stroke-dashoffset: 0;
                    fill: #1875F0;
                }
            }
        </style>
    </body>

</html>