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

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

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