gsap实现圈圈圆圈动画效果代码
代码语言:html
所属分类:动画
代码描述:gsap实现圈圈圆圈动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body, html { height:100%; width:100%; } body { background:#020202; margin:0; display:grid; } * { position:relative; } .demos { place-self:center; width:100%; display:flex; flex-direction:row; gap:1em; align-items:center; justify-content:center; flex-wrap:wrap; } /* begin shared css */ .demo { width:30vw; height:30vw; min-width:30vw; position:relative; overflow:hidden; background: linear-gradient(0deg, rgba(0,0,0,0.5) 4%, rgba(0,0,0,0) 80%), radial-gradient(circle at 20% 80%, #8C0082 0%, #170024 100%); } .circle { opacity:0.3; border-radius:50%; background:#f39; } /* end shared css */ .pulsing { display:grid; } .pulsing .circle { width:142%; height:142%; place-self: center; position:absolute; } .trails { display:grid; } .trails .circle { width:30%; height:30%; place-self: center; position:absolute; } .triad { display:grid; } .triad .circle { width:50%; height:50%; place-self: center; position:absolute; } </style> </head> <body translate="no"> <div class="demos"> <div class="demo pulsing"> <div class="circle circle1"></div> <div class="circle circle2"></div> <div class="circle circle3"></div> </div> <div class="demo trails"> <div class="circle circle1"></div> <div class="circle circle2"></div> <div class="circle circle3"></div> </div> <div class="demo triad"> <div class="circle circle1"></div> <div class="circle circle2"></div> <div class="circle circle3"></div> </div> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.11.0.js"></script> <script > const repeat = 20; const pulsing_tl = gsap.timeline({ repeat: repeat }); function createPulsing() { pulsing_tl.from(".pul.........完整代码请登录后点击上方下载按钮下载查看
网友评论0