gsap实现圣诞节l礼物从天而降点击打开礼物盒子动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：gsap实现圣诞节l礼物从天而降点击打开礼物盒子动画效果代码，结合了CustomBounce+CustomWiggle插件一起实现。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        :root {
          --bgHue: 210;
          --treeHue: 151;
          --stroke: hsl(var(--bgHue), 90%, 5%);
          --trunk: hsl(50, 50%, 20%);
          --star: hsl(50, 60%, 55%);
          --snow: hsl(var(--bgHue), 90%, 93%);
          --giftSmallHue: 0;
          --giftLargeHue: 210;
        }
        
        html, body {
          height: 100%;
        }
        
        body {
          background-color: hsl(var(--bgHue), 65%, 7%);
          display: grid;
          place-items: center;
        }
        
        svg {
          max-height: 80vh;
          max-width: 80vw;
        }
        
        .frame {
          stroke: var(--stroke);
          fill: none;
          stroke-width: 10;
        }
        
        .bg > *:nth-child(1) {
          fill: hsl(var(--bgHue), 50%, 69%);
        }
        .bg > *:nth-child(2) {
          fill: hsl(var(--bgHue), 50%, 75%);
        }
        .bg > *:nth-child(3) {
          fill: hsl(var(--bgHue), 50%, 81%);
        }
        .bg > *:nth-child(4) {
          fill: hsl(var(--bgHue), 50%, 87%);
        }
        .bg > *:nth-child(5) {
          fill: hsl(var(--bgHue), 50%, 93%);
        }
        .bg > *:nth-child(6) {
          fill: hsl(var(--bgHue), 50%, 99%);
        }
        
        .fg {
          fill: hsl(var(--bgHue), 50%, 99%);
        }
        
        .tree > * {
          stroke: var(--stroke);
        }
        .tree > *:nth-child(2) {
          fill: hsl(var(--treeHue), 35%, 17%);
        }
        .tree > *:nth-child(3) {
          fill: hsl(var(--treeHue), 35%, 20.5%);
        }
        .tree > *:nth-child(4) {
          fill: hsl(var(--treeHue), 35%, 24%);
        }
        .tree > *:nth-child(5) {
          fill: hsl(var(--treeHue), 35%, 27.5%);
        }
        .tree > *:nth-child(6) {
          fill: hsl(var(--treeHue), 35%, 31%);
        }
        .tree > *:nth-child(7) {
          fill: hsl(var(--treeHue), 35%, 34.5%);
        }
        .tree > *:first-child {
          fill: var(--trunk);
        }
        .tree > *:last-child {
          fill: var(--star);
        }
        
        .gift {
          --hue: 10;
          stroke: var(--stroke);
        }
        .gift--large {
          --hue: var(--giftLargeHue);
        }
        .gift--small {
          --hue: var(--giftSmallHue);
          cursor: pointer;
        }
        .gift__box {
          fill: hsl(var(--hue), 52%, 52%);
        }
        .gift__ribbon {
          stroke: var(--stroke);
        }
        .gift__lid {
          fill: hsl(var(--hue), 50%, 58%);
        }
        .gift__bow {
          stroke: var(--stroke);
          fill: hsl(calc(var(--hue) + 50), 60%, 65%);
        }
        .gift__bow--front {
          fill: hsl(calc(var(--hue)), 60%, 75%);
        }
        .gift__bow--back {
          fill: hsl(calc(var(--hue)), 60%, 70%);
        }
        .gift__confetti path {
          fill: hsl(var(--hue), 52%, 52%);
          stroke: none;
        }
        .gift__confetti path:nth-child(2n) {
          fill: hsl(calc(var(--hue) + 90), 52%, 52%);
        }
        .gift__confetti path:nth-child(3n) {
          fill: hsl(calc(var(--hue) + 180), 52%, 52%);
        }
        .gift__confetti path:nth-child(7n) {
          fill: hsl(calc(var(--hue) + 270), 52%, 52%);
        }
        
        .snow circle {
          fill: var(--snow);
        }
    </style>

</head>

<body>
    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" preserveAspectRatio="xMidYMid meet" viewBox="105.645 203.605 361 361">
  <defs>
    <clipPath id="frameClip">
      <circle cx="286.645" cy="384.605" r="175"/>
    </clipPath>
  </defs>
  <g clip-path="url(#frameClip)">
    <g class="bg">
      <rect width="383.624" height="359.468" x="102.525" y="195.83"/>
      <path d="M104.417 338.038s40.113 3.445 62.376-.399c22.264-3.845 99.122-23.236 116.457-24.676 17.334-1.439 51.337-2.806 86.053 2.696 34.716 5.502 53.892 23.461 70.137 22.959 16.245-.503 43.727 15.876 43.727 15.876l1.193 201.427-198.765 15.433-164.764-27.841-16.414-205.475Z"/>
      <path d="M117.032 298.155s52.338-11.743 80.286 5.613c27.949 17.355 35.602 43.449 71.49 43.479 35.888.031 97.222 19.352 142.801-11.938 45.579-31.29 55.301-26.429 64.384-27.578 9.083-1.148 3.525 245.49 3.525 245.49l-196.78 15.611-159.333-25.504-15.458-176.191 9.085-68.982Z" />
      <path d="M107.74 368.182c2.858-.222 47.181 9.483 91.335 9.851 41.901.35 53.188-5.485 92.543-6.146 41.539-.699 68.364 8.749 113.309 5.889 45.213-2.877 54.503-11.944 62.599-11.083 8.096.862-10.83 185.667-10.83 185.667l-175.478 12.692-160.57-22.431s-15.766-174.216-12.908-174.439Z" />
      <path d="m106.998 445.812-2.797-21.411s11.611-3.295 64.964-.953c47.514 2.085 82.576 14.514 94.141 13.897 11.565-.618 75.868 10.542 88.693 11.156 31.858 1.526 57.707-3.287 79.866-6.76 31.605-4.955 36.043-1.219 36.043-1.219l-1.583 104.539-181.845 24.316-163.184-24.828-14.298-98.737Z" />
    </g>
    <g class="snow">
      <circle cx="301.5" cy="201.5" r="1.5"/>
      <circle cx="203.632" cy="203.5" r="3.5"/>
      <circle cx="121.5" cy="201.5" r="1.5"/>
      <circle cx="355.175" cy="202.5" r="2.5"/>
      <circle cx="196.632" cy="202.5" r="2.5"/>
      <circle cx="221.5" cy="201.5" r="1.5"/>
      <circle cx="167.5" cy="201.5" r="1.5"/>
      <circle cx="261.5" cy="201.5" r="1.5"/>
      <circle cx="227.632" cy="203.5" r="3.5"/>
      <circle cx="280.175" cy="202.5" r="2.5"/>
    </g>
    <g class="tree">
      <path d="M307.991 418.982c0-4.713-3.826-8.539-8.538-8.539h-25.615c-4.713 0-8.538 3.826-8.538 8.539v54.12c0 4.713 3.825 8.539 8.538 8.539h25.615c4.712 0 8.538-3.826 8.538-8.53.........完整代码请登录后点击上方下载按钮下载查看