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

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

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