svg 实现圆环加载动画

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .circular {
        width: 100px;
        height: 100px;
        animation: rotate 2s linear infinite;
    }

    .path {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
        stroke: skyblue;
        animation: dash 1.5s ease-in-out infinite
    }

    @keyframes rotate {
        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes dash {

        /* stroke-dasharray:用于创建虚线 */
        /* stroke-dasharray为一个参数时： 其实是表示虚线长度和每段虚线之间的间距
　　    如：stroke-dasharray = ‘10’ 表示：虚线长10，间距10，然后重复 虚线长10，间距10 */

        /* 两个参数或者多个参数时：一个表示长度，一个表示间距
    　　如：stroke-dasharray = ‘10, 5’ 表示：虚线长10，间距5，然后重复 虚线长10，间距5
    　　如：stroke-dasharray = ‘20, 10, 5’ 表示：虚线长20，间距10，虚线长5，接着是间距20，虚线10，间距5，之后开始如此循环 */

        /*stroke-dashoffset： offset：偏移的意思。
        这个属性是相对于起始点的偏移，正数偏移x值的时候，相当于往左移动了x个长度单位，负数偏移x的时候，相当于往右移动了x个长度单位。
        需要注意的是，不管偏移的方向是哪边，要记得dasharray 是循环的，也就是 虚线-间隔-虚线-间隔。
        这个属性要搭配stroke-dashoffset才能看得出来效果，非虚线的话，是无法看出偏移的。 */
        0% {
            stroke-dasharray: 1, 200;
            stroke-dashoffset: 0;
        }

        50% {
            stroke-dasharray: 89, 200;
            stroke-dashoffset: -35px;
        }

        100% {
            stroke-dasharray: 89, 200;
            stroke-dashoffset: -124px;
        }
    }
</style>

<body>
    <svg class="circular" viewbox="25 25 50 50">
        <!-- viewBox="x, y, width, height"：x：左上角的横坐标，y：左上角纵坐标，width：宽度，height：高度。
            这个就像qq截图，x，y 是选中的起始点，width 和 height 是选择截图的宽度和高度。
            viewBox 区域会铺满 SVG，所以可以定义 SVG 的大小，来限制 viewBox 的大小。 -->
        <circle class="path" cx="50" cy="50" r="20" fill="none" />
    </svg>
</body>

</html>
svg 实现圆环加载动画

猜你喜欢
