gsap+svg实现波浪条连环动画效果代码
代码语言:html
所属分类:动画
代码描述:gsap+svg实现波浪条连环动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background-color: #F7FFF7; overflow: hidden; text-align:center; display: flex; align-items: center; justify-content: center; } body, html { height: 100%; width: 100%; margin: 0; padding: 0; } .sweep{ opacity: 0.62; } :root { --node-stroke: #FFE66D; --node-fill: #FF6B6B; --node-sweep: #FF6B6B; --node-sweep-alt: #FF6B6B; } svg { width: 100%; height: 100%; visibility: hidden; } </style> </head> <body translate="no"> <svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"> <g id="allBars" transform="translate(400 20)"> <g class="bar"> <circle class="sweep" cx="6" cy="6" r="50" fill="none" stroke=var(--node-sweep) stroke-width="6" stroke-linecap="round"/> <line x1="6" x1="6" y1="6" x2="6" y2="56" fill="none" stroke="var(--node-stroke)" stroke-miterlimit="10" stroke-width="4"/> <circle cx="6" cy="6" r="6" fill="var(--node-fill)" stroke-width="0"/> <circle cx="6" cy="56" r="6" fill="var(--node-fill)" stroke-width="0"/> </g> <g class="bar"> <circle class="sweep" cx="6" cy="6" r="50" fill="none" stroke=var(--node-sweep-alt) stroke-width="6" stroke-linecap="round"/> <line x1="6" x1="6" y1="6" x2="6" y2="56" fill="none" stroke="var(--node-stroke)" stroke-miterlimit="10" stroke-width="4"/> <circle cx="6" cy="6" r="6" fill="var(--node-fill)" stroke-width="0"/> <circle cx="6" cy="56" r="6" fill="var(--node-fill)" stroke-width="0"/> </g> <g class="bar"> <circle class="sweep" cx="6" cy="6" r="50" fill="none" stroke=var(--node-sweep) stroke-width="6" stroke-linecap="round"/> <line x1="6" x1="6" y1="6" x2="6" y2="56" fill="none" stroke="var(--node-stroke)" stroke-miterlimit="10" stroke-width="4"/> <circle cx="6" cy="6" r="6" fill="var(--node-fill)" stroke-width="0"/> <circle cx="6" cy="56" r="6" fill="var(--node-fill)" stroke-width="0"/> </g> <g class="bar"> <circle class="sweep" cx="6" cy="6" r="50" fill="none" stroke=var(--node-sweep-alt) stroke-width="6" stroke-linecap="round"/> <line x1="6" x1="6" y1="6" x2="6" y2="56" fill="none" stroke="var(--node-stroke)" stroke-miterlimit="10" stroke-width="4"/> <circle cx="6" cy="6" r="6" fill="var(--node-fill)" stroke-width="0"/> <circle cx="6" cy="56" r="6" fill="var(--node-fill)" stroke-width="0"/> </g> <g class="bar".........完整代码请登录后点击上方下载按钮下载查看
网友评论0