gsap+svg实现点击小熊示爱表白动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：表白
代码描述：gsap+svg实现点击小熊示爱表白动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
    <style>
        * {
          box-sizing: border-box;
          -moz-user-select: none;
           -ms-user-select: none;
               user-select: none;
          -webkit-user-select: none;
        }
        body {
          background: #e6e6e6;
          min-height: 100vh;
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: center;
          opacity: 0;
        }
        @media (prefers-color-scheme: dark) {
          body {
            background: #1a1a1a;
          }
        }
        .heart {
          position: absolute;
          height: calc(var(--size) * 1vmin);
          width: calc(var(--size) * 1vmin);
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
        .heart svg {
          height: 100%;
          width: 100%;
        }
        .heart path {
          fill: hsl(var(--hue), 100%, 60%);
        }
        .backdrop {
          --color-one: #868ff9;
          --color-two: #86f9f9;
          --color-three: #bff986;
          --color-four: #f9e586;
          --color-five: #f99986;
          --cloud: rgba(255,255,255,0.95);
          height: 100vmax;
          width: 100vmax;
          background: radial-gradient(circle at center center, var(--cloud) 20%, transparent 20%), repeating-conic-gradient(var(--color-one) 0, var(--color-one) 10%, var(--color-two) 10%, var(--color-two) 20%, var(--color-three) 20%, var(--color-three) 30%, var(--color-four) 30%, var(--color-four) 40%, var(--color-five) 40%, var(--color-five) 50%);
          position: fixed;
          transform-origin: center;
          border-radius: 50%;
        }
        svg {
          --size: 50;
          height: calc(var(--size) * 1vmin);
          width: calc(var(--size) * 1vmin);
          z-index: 2;
        }
        span {
          z-index: 2;
        }
        .care-bear {
          --lightness: 50;
          cursor: pointer;
        }
        .care-bear__ear circle:nth-of-type(1) {
          fill: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
        }
        .care-bear__ear circle:nth-of-type(2) {
          --lightness: 90;
          fill: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
        }
        .care-bear__arm rect {
          --lightness: 45;
          fill: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
        }
        .care-bear__feet {
          --lightness: 40;
          -webkit-clip-path: circle(65% at 50% 130%);
          clip-path: circle(65% at 50% 130%);
        }
        .care-bear__feet path {
          fill: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
        }
        .care-bear__head circle {
          fill: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
        }
        .care-bear__belly circle:nth-of-type(1) {
          fill: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
        }
        .care-bear__belly circle:nth-of-type(2) {
          --lightness: 90;
          fill: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
        }
        .care-bear__heart {
          --saturation: 20;
          --hue: 0;
          fill: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
        }
        .care-bear__muzzle {
          --lightness: 90;
        }
        .care-bear__muzzle circle {
          fill: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
        }
        /**
          * Rain
          */
        .rain svg {
          -webkit-animation-delay: calc(var(--d) * -1s);
                  animation-delay: calc(var(--d) * -1s);
          -webkit-animation-duration: calc(var(--a) * 1s);
                  animation-duration: calc(var(--a) * 1s);
          -webkit-animation-iteration-count: infinite;
                  animation-iteration-count: infinite;
          -webkit-animation-name: drop;
                  animation-name: drop;
          -webkit-animation-timing-function: linear;
                  animation-timing-function: linear;
          height: 3vmin;
          left: calc(var(--x) * 1%);
          position: absolute;
          top: calc((var(--y) + 50) * -1px);
          width: 3vmin;
          z-index: -1;
        }
        .rain svg path {
          fill: #a1c6cc;
          stroke: none;
          opacity: var(--o);
          transform: scaleY(calc(var(--s) * 1.5));
        }
        @-webkit-keyframes drop {
          90% {
            opacity: 1;
          }
          100% {
            opacity: 0;
            transform: translateY(75vmin);
          }
        }
        @keyframes drop {
          90% {
            opacity: 1;
          }
          100% {
            opacity: 0;
            transform: translateY(75vmin);
          }
        }
    </style>



</head>

<body>
    <div class="backdrop"></div>
    <div class="hearts"></div><span title="Hold mouse/finger down">
  <svg class="care-bear" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 59.068209 54.91329">
    <g transform="translate(-70.967674 -112.10752)">
      <g class="care-bear__ear care-bear__ear--right" transform="translate(19.587616 -5.1859387)">
        <circle r="5.953125" cy="124.5695" cx="89.267891"></circle>
        <circle cx="89.267891" cy="124.5695" r="4.3193078"></circle>
      </g>
      <g class="care-bear__ear care-bear__ear--left" transform="translate(3.1834476 -5.1859387)">
        <circle cx="89.267891" cy="124.5695" r="5.953125"></circle>
        <circle r="4.3193078" cy="124.5695" cx="89.267891"></circle>
      </g>
      <g class="care-bear__arm care-bear__arm--right">
        <rect transform="matrix(.69012 .7237 .69116 -.7227 0 0)" ry="2.5978234" y="-19.412512" x="174.93823" height="19.637407" width="5.1956468"></rect>
      </g>
      <g class="care-bear__arm care-bear__arm--left">
        <rect width="5.1956468" height="19.637407" x="29.517857" y="-165.03149" ry="2.5978234" transform="matrix(-.69012 .7237 -.69116 -.7227 0 0)"></rect>
      </g>
      <g class="care-bear__feet">
        <path d="M94.1591085 159.39647033l1.13016505 3.97753411a5.29166634 5.29166634 0 00-.59738153-.03824023 5.29166634 5.29166634 0 00-5.02863109 3.68504783h21.7004818a5.29166634 5.29166634 0 00-5.0301842-3.68504783 5.29166634 5.29166634 0 00-.5968603.03720836l1.12964647-3.97650224z"></path>
      </g>
      <g class="care-bear__head">
        <circle cx="100.51268" cy="128.75888" r="13.229167"></circle>
      </g>
      <g class="care-bear__belly">
        <circle cx="100.51268" cy="149.04999" r="13.229167"></circle>
        <circle cx="100.51268" cy="149.04999" r="8.598958"></circle>
        <g class="care-bear__heart">
          <path d="M98.30347449 144.82645224c-.65124542 0-1.3024231.24925602-1.80144155.74827342-.99803372.99803478-.99803372 2.60484935 0 3.6028815l.4919599.49299282 3.60339796 3.6028815 3.60339744-3.6028815.32246093-.32297687c.99803744-.99803479.99803744-2.60536265 0-3.60339743-.49901474-.4990174-1.15013845-.748792-1.80144207-.748792-.65130097 0-1.30293797.2497746-1.80195536.748792l-.32246094.32297687-.49196095-.4924769c-.4990174-.49901739-1.1507126-.7482734-1.80195536-.7482734z"></path>
        </g>
      </g>
      <g class="care-bear__muzzle">
        <circle cx="100.29227" cy="132.97391" r="5.9451938"></circle>
      </g>
      <g class="care-bear__nose">
        <ellipse cx="100.29227" cy="129.55186" rx="1.5612032" ry="1.1618258"></ellipse>
      </g>
      <g class="care-bear__eye care-bear__eye--right" transform="translate(17.991638)">
        <circle cx="91.364403" cy="128.15633" r="1.3229166"></circle>
        <g class="care-bear__pupil care-bear__pupil--right">
          <circle cx="91.89357" cy="127.62716" r=".26458332" fill="#fff"></circle>
        </g>
      </g>
      <g class="care-bear__eye care-bear__eye--left">
        <circle r="1.3229166" cy="128.15633" cx="91.364403"></circle>
        <g class="care-bear__pupil care-bear__pupil--left">
          <circle r=".26458332" cy="127.62716" cx="91.89357" fill="#fff"></circle>
        </g>
      </g>
      <g class="care-bear__cheek care-bear__cheek--left">
        <circle cx="91.364403" cy="128.15633" r="1.3229166" fill="#faa" transform="translate(0 3.1750001)"></circle>
      </g>
      <g class="care-bear__cheek care-bear__cheek--right">
        <circle r="1.3229166" cy="128.15633" cx="91.364403" transform="translate(17.991638 3.1750001)" fill="#faa"></circle>
      </g>
      <g class="care-bear__mouth">
        <path d="M98.069425 133.1097a2.2359423 2.2359423 0 002.221095 2.00623 2.2359423 2.2359423 0 002.22459-2.00623z"></path>
        <path d="M100.97006285 134.12669591a.76244812.72614104 0 00-.76274347.7260537.76244812.72614104 0 00.05167577.26199835 2.23594226 2.23594226 0 00.03152246.00105834 2.23594226 2.23594226 0 001.40094757-.49506187.76244812.72614104 0 00-.72140233-.4940247z" fill="red"></path>
      </g>
    </g>
  </svg></span>
    <div class="rain">
        <svg>
    <path> </path>
  </svg>
    </div>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.5.2.js"></script>
    <script>
        const { gsap } = window;
        const { timeline, to, set } = gsap;
        
        const $RAIN = document.querySelector('.rain');
        const $BACKDROP = document.querySelector('.backdrop');
        const $HEARTS = document.querySelector('.hearts');
        const $BEAR = document.querySelector('.care-bear');
        const $BEAR_ARM_LEFT = document.querySelector('.care-bear__arm--left');
        const $BEAR_ARM_RIGHT = document.querySelector('.care-bear__arm--right');
        const $BEAR_EAR_LEFT = document.querySelector('.car.........完整代码请登录后点击上方下载按钮下载查看