gsap打开宝盒放出精灵动画效果代码-html代码-BFW代码库

gsap打开宝盒放出精灵动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap打开宝盒放出精灵动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body {
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #653a95;
}
svg {
  width: 90vw;
  min-width: 300px;
  max-height: 90vh;
}
#button-trigger {
  cursor: pointer;
}
</style>


</head>

<body >
  <!-- totally inspired from Akkadayo's original idea https://www.instagram.com/p/CG8iOU_hOSB/?igshid=wqyyq9vwgvyy -->
<svg viewBox="0 0 948 948" aria-labelledby="uniqueTitleID uniqueDescID" role="img">
  <title id="uniqueTitleID">Halloween toast</title>
  <desc id="uniqueDescID">Click or touch the toaster button for a surprise!</desc>
  <defs>
    <linearGradient id="lightGradient" x1="480" x2="480" y1="584" y2="-.4" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#f28e20"/>
      <stop offset="1" stop-color="#f28e20" stop-opacity="0"/>
    </linearGradient>
    <clipPath id="clip1">
      <polygon points="0 0 948 0 547.39 569.06 521.63 583.5 295.63 521.19 275.82 521.1 0 0" fill="#231f20"/>
    </clipPath>
    <clipPath id="clip2">
      <polygon points="0 0 948 0 580.63 550.44 564.31 559.13 338.5 497.06 195.67 96.33" fill="#000"/>
    </clipPath>
  </defs>
  <g id="bg" >
    <rect width="948" height="948" fill="#653a95"/>
    <g id="stars" opacity=".66" style="mix-blend-mode:overlay">
      <polygon fill="#fff" points="166.94 149.87 156.77 147.09 148.71 153.89 148.21 143.36 139.25 137.8 149.11 134.07 151.63 123.83 158.23 132.05 168.75 131.28 162.96 140.1 166.94 149.87" />
      <polygon fill="#fff" points="780.48 117.74 769.21 104.37 751.8 106.08 761.03 91.22 754.02 75.19 771 79.38 784.08 67.76 785.35 85.21 800.44 94.06 784.24 100.65 780.48 117.74" />
      <polygon fill="#fff" points="750.48 327.88 740.69 325.45 733.14 332.12 732.44 322.07 723.75 316.95 733.1 313.17 735.28 303.33 741.76 311.05 751.8 310.08 746.46 318.63 750.48 327.88" />
      <polygon fill="#fff" points="229.72 321.56 22.........完整代码请登录后点击上方下载按钮下载查看