gsap+svg实现波浪条连环动画效果代码-html代码-BFW代码库

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="rou.........完整代码请登录后点击上方下载按钮下载查看