svg+gsap实现邮票点击烟花绽放动画效果代码-html代码-BFW代码库

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.401.........完整代码请登录后点击上方下载按钮下载查看