android svg 线条动画教程,svg 线条动画

使用css变量, 控制线条动画

Document

path {

animation: move 3s linear forwards infinite;

/* --main-path-len: 511px; */

}

@keyframes move {

0% {

stroke-dasharray: 0, var(--main-path-len);

}

100% {

stroke-dasharray: var(--main-path-len), 0;

}

}

id="path"

fill="none"

stroke="#000"

stroke-width="1px"

d="M452,293c0,0,0-61,72-44c0,0-47,117,81,57

s5-110,10-67s-51,77.979-50,33.989"

/>

const p = document.getElementsByTagName("path")[0]

console.log(p.getTotalLength())

const s = p.getTotalLength() + "px"

console.log(p.style, s)

p.style.setProperty("--main-path-len", s)

圆环进度条填充

Document

.circle-load {

position: absolute;

width: 200px;

height: 200px;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

.circle-load-svg {

stroke-dasharray: 0 570;

animation: rot 8s linear infinite;

}

@keyframes rot {

100% {

stroke-dasharray: 570 570;

}

}

width="240px"

height="240px"

version="1.1"

xmlns="http://www.w3.org/2000/svg"

>

cx="110"

cy="110"

r="90"

stroke-width="10"

stroke="gainsboro"

fill="none"

>

cx="110"

cy="110"

r="90"

stroke-width="10"

stroke="darkturquoise"

fill="none"

class="circle-load-svg"

>

程序员灯塔

转载请注明原文链接：svg 线条动画