gsap+svg实现动态背景银行卡片效果代码-html代码-BFW代码库

gsap+svg实现动态背景银行卡片效果代码

代码语言：html

代码描述：gsap+svg实现动态背景银行卡片效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');

html, body {
  width:100%;
  height:100%;
  background:#f3ede2;
  overflow:hidden;
  font-family: 'Montserrat', sans-serif;
}

svg {
  opacity:0;
  position:absolute;
  width:80%;
  max-height:95%;
  left:10%;
  top:50%;
  transform:translateY(-50%);
}
</style>




</head>

<body>
  <svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 368">
  <defs>
    <mask id="chipMask">
      <rect width="100%" height="100%" fill="#fff"/>
      <path fill="none" stroke="#000" stroke-width="3" d="M98,133c0,0,4.3,0,7.2,0c2.8,0,3.8,2,3.8,4s-1,6-4,6H89 M109,176.2c0,0,3.5-2.7,3.5-8.7c0-4-4-10-9-10 s-15,0-15,0 M103.5,143.5V156 M136.8,133c0,0-7.3-0.5-7.1,5c0.1,2.6,1.8,5.5,6.3,5.5c5.3-0.1,14.9-0.5,14.9-0.5 M150.4,157.5 c0,0-10.1,0-15.1,0s-9.1,6-9.1,10c0,6,3.5,8.7,3.5,8.7 M135.3,143.5V156"/>
    </mask>
    
    <mask id="cardMask">
      <rect rx="20" ry="20" fill="#fff" width="600" height="368"/>
    </mask>
    
    <clipPath id="txtBoxes">    
      <rect class="txtBox" x="40" y="37" width="90" height="35" />
      <rect class="txtBox" x="40" y="300" width="195" height="35" />
      <rect class="txtBox" x="470" y="290" width="80" height="35" />      
    </clipPath>  
    
    <clipPath id="orbClip1">
      <use href="#orb1" />
      <use href="#orb2" />      
    </clipPath>
    
  </defs>
  
  
  
  <g mask="url(#cardMask)">
    
    <rect class="bg" fill="#271b13" width="100%" height="100%"/>
    
    <g fill="none" stroke="#fff" stroke-width="2" stroke-dasharray="6 2 4 2.5 4 3 3.5 3">
      <path class="coil" d="M306.1,671.4C62.6,602.5-79.4,350.4-10.9,108.3s295.2-372.5,538.7-303.6"/>
      <path id="midC" class="coil" d="M352.7,333.4c-79.2-30.9-137.8-142.9-100.6-235.7S386.5-16.5,449.6-11.7"/>
      <path id="innerC" class="coil&q.........完整代码请登录后点击上方下载按钮下载查看