svg+js实现燃烧的线条篝火火苗动画效果代码
代码语言:html
所属分类:动画
代码描述:svg+js实现燃烧的线条篝火火苗动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body{ background:#222; } svg{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); height:100vh; width:100vw; } </style> </head> <body> <script> function bonfire() { const randInt = (min, max) => { return Math.floor(Math.random() * (max - min + 1)) + min; }; let paths = ``; for (let i = 0; i < 200; i++) { let randOff = randInt(-15, 15) / 10; let d = `M ${randInt(35, 65) / 10} 10 Q ${5 - randOff} 7.5 5 ${randInt(35, 65) / 10} Q ${5 + randOff} 2.5 ${randInt(35, 65) / 10} 0`; let p = document.createElementNS('http://www.w3.org/2000/svg', 'path'); p.setAttribute('d', d); console.log(p.getTotalLength()); let len = p.getTotalLength(); let .........完整代码请登录后点击上方下载按钮下载查看
网友评论0