利用css将静态svg实现动态效果

实现

1. 准备静态的svg
   将下载的 SVG 文件用编辑器打开，复制其中的<svg>标签的内容；复制之后，为其中的<path>标签内容加上所需的类目，不同的<svg>标签包含的<path>标签个数不同。下面为演示实例

    <svg t="1682397622256" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="926" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
        <path class="iconPath1"
            d="M513.706667 993.066667l-30.933334-8.746667c-261.546667-75.093333-388.693333-190.08-388.693333-352V172.586667l50.773333-3.2a661.333333 661.333333 0 0 0 336-119.893334l34.133334-26.026666 32.853333 25.6c90.24 66.773333 205.44 106.666667 341.333333 119.466666l49.493334 3.626667v473.813333c-8.32 160.213333-144.64 272.64-416.853334 344.96zM158.08 232.32v400c0 129.28 112 224.426667 341.333333 290.56l14.08 3.84c236.16-64 354.133333-156.8 360.746667-282.88V231.466667a729.173333 729.173333 0 0 1-360.746667-128 724.053333 724.053333 0 0 1-355.413333 128.853333z"
            fill="#333333" p-id="927"></path>
        <path class="iconPath2"
            d="M485.546667 670.506667l-134.826667-134.826667A32 32 0 0 1 395.946667 490.666667l89.6 89.6 192-192a32 32 0 1 1 45.226666 45.44z"
            fill="#333333" p-id="928"></path>
    </svg>

3. CSS 样式 添加描边效果与动画效果。下面为演示实例。

    .iconPath1 {
        /* 填充颜色 */
        fill: none;
        /* 图形元素外轮廓颜色和宽度 */
        stroke: #000;
        stroke-width: 3;
        /* 两端的形状 */
        stroke-linecap: round;
    }
    /* iconPath2 重复样式 iconPath1 */
    
    @keyframes move {
        0% {
            /* 第一个参数为线条长度， 第二个参数为线条之间空隙距离 */
            stroke-dasharray: 0, 1000px;
        }
        100% {
            stroke-dasharray: 1000px, 0;
        }
    }
    .icon:hover{
        animation: move 1s linear;
    }

原图与实现效果比较：