svg 水管动画 demo，HTML/Vue代码在线实时编辑、预览

HTML

格式化

支持Emmet，输入 p 后按 Tab键试试吧！

<head> ...

展开

</head>

<body>

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

            
            <h1>水管动画</h1>

<svg width="200" height="200" viewBox="0 0 100 100">
    <defs>
        <!-- 渐变 -->
        <linearGradient id="Gradient1">
            <stop class="stop1" offset="0%" />
            <stop class="stop2" offset="100%" />
        </linearGradient>
    </defs>

    <path id="bg" d="
      M 10 50 
      Q 25 5 50 30
      T 90 10 
      " stroke-width="10" stroke-linecap="round" fill="transparent" />
    <path id="shuiguan" d="
      M 10 50 
      Q 25 5 50 30
      T 90 10 
      " stroke-width="6" stroke-linecap="round" pathLength="1" fill="transparent" />

</svg>

</body>

CSS

格式化

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

            
            #bg {
    stroke: #ffebab;
}

#shuiguan {
    stroke-dashoffset: 2;
    stroke: url(#Gradient1);
    stroke-dasharray: 1;
    animation-name: fill-line;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.stop1 {
    stop-color: #ffebab;
}

.stop2 {
    stop-color: #f2ab91;
}

@keyframes fill-line {
    0% {
        stroke-dashoffset: 2;
    }

    50% {
        stroke-dashoffset: 1;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

格式化

预览

控制台