svg+gsap实现邮票点击烟花绽放动画效果代码
代码语言：html
所属分类：动画
代码描述：svg+gsap实现邮票点击烟花绽放动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@import url("https://fonts.googleapis.com/css2?family=Recursive&display=swap");
body, html {
margin: 0;
padding: 0;
background: #F7D794;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
font-family: "Recursive", sans-serif;
}
.box {
width: 800px;
height: 600px;
text-align: center;
}
.text {
color: #fff;
}
#stamp {
filter: drop-shadow(0px 10px 10px rgba(0, 0, 0, 0.08));
}
#whole {
cursor: pointer;
}
</style>
</head>
<body >
<div class="box">
<div class="text">Click the sky to shoot a Firework :)</div>
<svg id="svg" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.5">
<path id="bg_bg" fill="#F7D794" d="M0 0h800v600H0z" />
<g id="whole">
<rect class="posiBox" id="posiBox" x="0" y="0" width="165" height="170" />
<g id="stamp">
<path fill="#fff" d="M316.564 195.835h167.072v208.107H316.564z"/>
<path d="M501.461 182.298c-3.533 0-6.402 2.869-6.402 6.402s2.869 6.402 6.402 6.402v9.323c-3.533 0-6.402 2.869-6.402 6.402s2.869 6.402 6.402 6.402v9.323c-3.533 0-6.402 2.869-6.402 6.402s2.869 6.402 6.402 6.402v9.323c-3.533 0-6.402 2.869-6.402 6.402s2.869 6.402 6.402 6.402v9.323c-3.533 0-6.402 2.869-6.402 6.402s2.869 6.402 6.402 6.402v9.323c-3.533 0-6.402 2.869-6.402 6.402s2.869 6.402 6.402 6.402v9.323c-3.533 0-6.402 2.869-6.402 6.402s2.869 6.402 6.402 6.402v9.323c-3.533 0-6.402 2.869-6.402 6.402s2.869 6.402 6.402 6.402v9.323c-3.533 0-6.402 2.869-6.402 6.402s2.869 6.402 6.402 6.402v6.949c-3.533 0-6.402 2.868-6.402 6.402 0 3.533 2.869 6.401 6.402 6.401v9.324c-3.533 0-6.402 2.868-6.402 6.401 0 3.534 2.869 6.402 6.402 6.402v12.147h-6.84c.016-.181.024-.365.024-.551 0-3.533-2.869-6.401-6.402-6.401s-6.402 2.868-6.402 6.401c0 .186.008.37.024.551h-9.371c.016-.181.024-.365.024-.551 0-3.533-2.869-6.401-6.402-6.401s-6.401 2.868-6.401 6.401c0 .186.007.37.023.551h-9.37c.015-.181.023-.365.023-.551 0-3.533-2.869-6.401-6.402-6.401s-6.401 2.868-6.401 6.401c0 .186.007.37.023.551h-9.37c.015-.181.023-.365.023-.551 0-3.533-2.869-6.401-6.402-6.401s-6.401 2.868-6.401 6.401c0 .186.007.37.023.551h-9.37c.015-.181.023-.365.023-.551 0-3.533-2.868-6.401-6.402-6.401-3.533 0-6.401 2.868-6.401 6.401 0 .186.008.37.023.551h-9.37c.015-.181.023-.365.023-.551 0-3.533-2.868-6.401-6.402-6.401-3.533 0-6.401 2.868-6.401 6.401 0 .186.008.37.023.551h-9.37c.015-.181.023-.365.023-.551 0-3.533-2.868-6.401-6.402-6.401-3.533 0-6.401 2.868-6.401 6.401 0 .186.008.37.023.551h-9.37c.015-.181.023-.365.023-.551 0-3.533-2.868-6.401-6.402-6.401-3.533 0-6.401 2.868-6.401 6.401 0 .186.008.37.023.551h-9.37c.015-.181.023-.365.023-.551 0-3.533-2.868-6.401-6.402-6.401-3.533 0-6.401 2.868-6.401 6.401 0 .186.008.37.023.551h-6.109v-12.166c.163.013.328.019.494.019 3.533 0 6.402-2.868 6.402-6.402 0-3.533-2.869-6.401-6.402-6.401-.166 0-.331.006-.494.019v-9.362c.163.013.328.019.494.019 3.533 0 6.402-2.868 6.402-6.401 0-3.534-2.869-6.402-6.402-6.402-.166 0-.331.006-.494.019v-6.987c.163.012.328.019.494.019 3.533 0 6.402-2.869 6.402-6.402s-2.869-6.402-6.402-6.402c-.166 0-.331.006-.494.019v-9.361c.163.012.328.019.494.019 3.533 0 6.402-2.869 6.402-6.402s-2.869-6.402-6.402-6.402c-.166 0-.331.006-.494.019v-9.361c.163.012.328.019.494.019 3.533 0 6.402-2.869 6.402-6.402s-2.869-6.402-6.402-6.402c-.166 0-.331.007-.494.019v-9.361c.163.012.328.019.494.019 3.533 0 6.402-2.869 6.402-6.402s-2.869-6.402-6.402-6.402c-.166 0-.331.007-.494.019v-9.361c.163.012.328.019.494.019 3.533 0 6.402-2.869 6.402-6.402s-2.869-6.402-6.402-6.402c-.166 0-.331.007-.494.019v-9.361c.163.012.328.019.494.019 3.533 0 6.402-2.869 6.402-6.402s-2.869-6.402-6.402-6.402c-.166 0-.331.007-.494.019v-9.361c.163.012.328.019.494.019 3.533 0 6.402-2.869 6.402-6.402s-2.869-6.402-6.402-6.402c-.166 0-.331.007-.494.019v-9.361c.163.012.328.019.494.019 3.533 0 6.402-2.869 6.402-6.402s-2.869-6.402-6.402-6.402c-.166 0-.331.007-.494.019v-9.361c.163.012.328.019.494.019 3.533 0 6.402-2.869 6.402-6.402s-2.869-6.402-6.402-6.402c-.166 0-.331.007-.494.019v-8.685h6.086c0 3.533 2.868 6.402 6.401 6.402 3.534 0 6.402-2.869 6.402-6.402h9.324c0 3.533 2.868 6.402 6.401 6.402 3.534 0 6.402-2.869 6.402-6.402h9.324c0 3.533 2.868 6.402 6.401 6.402 3.534 0 6.402-2.869 6.402-6.402h9.324c0 3.533 2.868 6.402 6.401 6.402 3.534 0 6.402-2.869 6.402-6.402h9.324c0 3.533 2.868 6.402 6.401 6.402 3.534 0 6.402-2.869 6.402-6.402h9.324c0 3.533 2.868 6.402 6.401 6.402s6.402-2.869 6.402-6.402h9.324c0 3.533 2.868 6.402 6.401 6.402s6.402-2.869 6.402-6.402h9.324c0 3.533 2.868 6.402 6.401 6.402s6.402-2.869 6.402-6.402h9.323c0 3.533 2.869 6.402 6.402 6.402s6.402-2.869 6.402-6.402h6.816v8.666z" fill="#ebebeb"/>
</g>
<path fill="#596276" d="M316.564 195.835h167.072v160.136H316.564z" />
<path id="bg" fill="#596276" d="M316.564 195.835h167.072v208.107H316.564z" />
<clippath id="_clip1">
<path d="M316.564 195.835h167.072v208.107H316.564z" />
</clippath>
<g clip-path="url(#_clip1)">
<g id="f1" fill="none" stroke="#fff">
<path id="f_btm1" d="M316.564 195.617v150" stroke-width="1" />
<g id="f_top1">
<path class='odd' d="M323.552 167.537l-4.917 18.353" />
<path d="M316.564 166.617v19" />
<path class='odd' d="M309.576 167.537l4.918 18.353" />
<path d="M303.064 170.235l9.5 16.454" />
<path class='odd' d="M297.472 174.525l13.435 13.435" />
<path d="M293.182 180.117l16.454 9.5" />
<path class='odd' d="M290.484 186.629l18.353 4.918" />
<path d="M289.564 193.617h19" />
<path class='odd' d="M290.484 200.605l18.353-4.917" />
<path d="M293.182 207.117l16.454-9.5" />
<path class='odd' d="M297.472 212.709l13.435-13.435" />
<path d="M303.064 217l9.5-16.454" />
<path class='odd' d="M309.576 219.697l4.918-18.352" />
<path d="M316.564 220.617v-19" />
<path class='odd' d="M323.552 219.697l-4.917-18.352" />
<path d="M330.064 217l-9.5-16.454" />
<path class='odd' d="M335.656 212.709l-13.435-13.435" />
<path d="M339.947 207.117l-16.455-9.5" />
<path class='odd.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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