svg动画效果实例分享

本帖最后由 前端小姐姐 于 2021-11-26 16:41 编辑

1、效果展示：分别是3个小动画效果，效果如下：

1.gif (37.38 KB, 下载次数: )

下载附件

2021-11-26 16:40 上传

2、代码展示：
（1）第一个动画只有html代码：
①html：
<svg width="650" height="650" viewBox="0 0 650 650" version="1.1" xmlns="http://www.w3.org/2000/svg">

    <circle cx="100" cy="550" r="50" fill="#00BFFF" opacity="0">
        <animate attributeName="opacity" values="0;1;0;1;0;1;0;1" begin="0s" dur="0.5s" repeatCount="1" fill="freeze"/>
    </circle>

    <path stroke="#00BFFF" stroke-width="5" d="M100,550 L100,550">
        <animate attributeName="d" values="M100,550 L100,550;M100,550 L500,350" begin="0.5s" dur="0.5s" repeatCount="1" fill="freeze"/>
    </path>

    <circle cx="500" cy="350" r="50" fill="#00BFFF" opacity="0">
        <animate attributeName="opacity" values="0;1;0;1;0;1;0;1" begin="1s" dur="0.5s" repeatCount="1" fill="freeze"/>
    </circle>
</svg>
（2）第二个动画有html+css代码：①html：
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" class="circle-load-rect-svg" width="300" height="200" viewbox="0 0 600 400">
    <polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-path"/>
    <polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-fill"/>
</svg>
②css：.
g-rect-path{
    fill: none;
    stroke-width:10;
    stroke:#d3dce6;
    stroke-linejoin:round;
    stroke-linecap:round;
}
.g-rect-fill{
    fill: none;
    stroke-width:10;
    stroke:#ff7700;
    stroke-linejoin:round;
    stroke-linecap:round;
    stroke-dasharray: 0, 1370;
    stroke-dashoffset: 0;
    animation: lineMove 2s ease-out infinite;
}
@keyframes lineMove {
    0%{
        stroke-dasharray: 0, 1350;
    }
    100%{
        stroke-dasharray: 1350, 1350;
    }
}
（3）第三个动画有html+css代码：①html：<svg width="14" height="14" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <circle cx="7" cy="7" r="5" stroke-width="3" stroke="#00A5E0" fill="none" class="lineMove1"></circle>
</svg>
②css：.lineMove1{
    stroke-dasharray: 0, 32;
    stroke-dashoffset: 0;
    animation: lineMove1 2s ease-out infinite;
}
@keyframes lineMove1 {
    0%{
        stroke-dasharray: 0, 32;
    }
    100%{
        stroke-dasharray: 32, 32;
    }
}