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" d="M404.4,221c-39.6-7.4-65.7-45.6-58.3-85.2s41.6-63.7,81.2-56.3"/>
</g>
<polygon id="tri1" fill="#424d9b" points="0,47 0,0 44,22"/>
<polygon id="tri2" fill="#424d9b" points="0,47 0,0 44,22"/>
<g fill="#424d9b">
<circle id="orb1" cx="123" cy="410" r="105"/>
<circle id="orb2" cx="540" cy="45" r="134"/>
</g>
<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" .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0