SVG卡动画

下载代码

html

css

分享到微信朋友圈

html

<g fill="#f9bb4b">
      <path id="wave2" d="M-941,1510c89-58,147-115,211-201s142-153,210-195s144-42,208-86s69-130,70-173s5-129,38-193 c0,0,17.5-27.5,30.9-40.1C-159.6,609.4-137,593-137,593c89-58,147-115,211-201s142-153,210-195s144-42,208-86s69-130,70-173 s5-129,38-193v1765H-941z"/>
    </g>
    <g fill="#f9503e">
      <path id="wave1" d="M1551.5-1044.5c0,0-63,27-131,91s-122,185-186,244s-163,152.7-206,263.3s-90,162.7-128,189.7c0,0-14,10-26,16 c-16,8-24,11-24,11s-63,27-131,91s-122,185-186,244s-163,152.7-206,263.3c-9,23.2-18.2,43.9-27.5,62.3c56.5,0,1255.5-0.1,1255.5-0.1 L1551.5-1044.5z"/>
    </g>
    
    <g clip-path="url(#orbClip1)">
      <image class="scratches" width="150" href="https://assets.codepen.io/721952/scratches2.png" />
      <use href="#wave2" fill="#3f7773" />
      <use href="#wave1" fill="#271b13" />      
    </g>
    
    <path id="star" fill="#fff" d="M397,17.6c3-3,6.1-9.1,6.1-9.1s0.8,3.8,4.5,7.6c6.1,6.1,9.1,6.1,9.1,6.1s-3,1.5-7.6,6.1 s-6.1,9.1-6.1,9.1s-2.3-5.3-6.1-9.1s-8.3-5.3-8.3-5.3S394,20.6,397,17.6z"/>
    
    <g id="logo">
      <circle class="logoPt" fill="#fff" cx="503" cy="67" r="25"/>
      <circle class="logoPt" fill="none" stroke="#fff" stroke-width="4.5" cx="533" cy="67" r="22.5"/>
    </g>        
    
    <g fill="#fff" stroke-linecap="round">
      <g clip-path="url(#txtBoxes)">
        <text x="45" y="60" font-size="26">Debit</text>
        <text x="45" y="320" font-size="21">Gail Bell</text>
        <text x="470" y="320" font-size="26">02/30</text>    
      </g>
      <path fill="none" stroke="#fff" stroke-width="2.4" d="M42.5,146.5c2,2,2,6.3,0,8.2 M57,163.7c5.1-5.9,5.1-19.8,0-26.3 M52.1,160.7c4.4-4.5,4.9-15.2,0-20.2
     M47.8,157.2c2.9-3,2.9-10,0-13.2"/>
      <rect mask="url(#chipMask)" rx="5" ry="5" x="89" y="125" width="61" height="50.2"/>
    </g>
  </g>
  
</svg>

css

JavaScript

const tl = gsap.timeline()
  .set('svg', {opacity:1})
  .set('.scratches', {rotation:70, x:450, y:-10})
  .set('#tri2', {scale:0.5})
  .from('#cardMask rect', {scale:0, rotation:-20, duration:2, transformOrigin:'50% 50%', ease:'expo.inOut'}, 0)
  .to('#tri1', {motionPath: {
      path: "#midC",
      align: "#midC",
      alignOrigin: [0.5,0.5],
      autoRotate: true,
      start: 1,
      end: 0
    }, duration:6, repeat:-1, ease:'none', repeatDelay:1}, 0.5)
  .to('#tri2', {motionPath: {
      path: "#innerC",
      align: "#innerC",
      alignOrigin: [0.5,0.5],
      autoRotate: true,
      start: 0,
      end: 1
    }, duration:5, repeat:-1, ease:'none', repeatDelay:1}, 1.5)
  .from('.coil', {attr:{'stroke-dashoffset':(i)=>(i==1)?-28:28}, ease:'none', duration:1, repeat:-1}, 1)
  .fromTo('#orb1', {y:160}, {y:-20, ease:'circ', repeat:-1, yoyo:true, duration:1}, 0.8)
  .from('.logoPt', {x:(i)=>[18,-10][i], duration:1.2, ease:'expo.inOut'}, 0.9)
  .from('svg text', {x:-40, duration:1.1, ease:'expo.inOut', stagger:0.2}, 1)
  .from('.txtBox', {scaleX:0, transformOrigin:'100% 0', duration:1.1, ease:'expo.inOut', stagger:0.2}, 1)
  .fromTo('#wave1', {x:0, y:0},{duration:5, x:-701, y:815, repeat:-1, ease:'none'}, 0)
  .fromTo('#wave2', {x:0, y:0},{duration:6, x:804, y:-917, repeat:-1, ease:'none', onRepeat:()=>starShine.play(0)}, 0)

starShine = gsap.timeline()
  .set('#star', {scale:0, transformOrigin:'50% 50%', x:2, y:10})
  .to('#star', {scale:1, repeat:1, yoyo:true, yoyoEase:true, duration:0.4, ease:'power4'}, 0)
  .fromTo('#star', {rotate:-20},{rotate:120, duration:0.8, ease:'none'}, 0)

window.onclick =()=> tl.play(0);

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg