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