gsap+svg实现点赞数字跳跃动画效果代码-html代码-BFW代码库

gsap+svg实现点赞数字跳跃动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap+svg实现点赞数字跳跃动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        *,
        *:after,
        *:before {
          box-sizing: border-box;
        }
        body {
          min-height: 100vh;
          display: grid;
          place-items: center;
        }
        :root {
          --size: 96;
          --backdrop: #dddfde;
          --heart-empty: #828ca1;
          --pink: #dc185d;
          --backdrop-hover: #fce3ec;
          --text: #fff;
          --speed: 0.1s;
        }
        .like-button {
          height: calc(var(--size) * 1px);
          width: calc(var(--size) * 1px);
          border-radius: 12.5%;
          border: 0;
          position: relative;
          background: var(--backdrop);
          transition: background var(--speed);
          cursor: pointer;
          transform: scale(var(--scale, 1));
          transition: transform var(--speed);
          transform-style: preserve-3d;
          outline-color: var(--outline, var(--heart-empty));
        }
        .like-button__icon {
          position: absolute;
          height: 50%;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          fill: var(--heart, var(--heart-empty));
          transition: fill var(--speed);
        }
        .like-button__ring {
          height: 50%;
          width: 50%;
          position: absolute;
          top: 50%;
          left: 50%;
          border-radius: 50%;
          border: 0.5vmin solid var(--pink);
          transform: translate3d(-50%, -50%, -1px) scale(1);
          z-index: -1;
        }
        .like-button__count {
          background: var(--count, var(--heart-empty));
          color: var(--text);
          position: absolute;
          z-index: 4;
          padding: 4px 4px;
          font-family: sans-serif;
          min-width: 50%;
          border-radius: 1rem;
          font-size: 1.25rem;
          top: 50%;
          left: 50%;
          transform: translate3d(-50%, -50%, -1px);
          z-index: -1;
        }
        .like-button:hover,
        .like-button--active {
          --heart: var(--pink);
          --backdrop: var(--backdrop-hover);
        }
        .like-button--active {
          --count: var(--pink);
          --outline: var(--pink);
        }
        .like-button:active {
          --scale: 0.9;
        }
        .sr-only {
          position: absolute;
          width: 1px;
          height: 1px;
          padding: 0;
          margin: -1px;
          overflow: hidden;
          clip: rect(0, 0, 0, 0);
          white-space: nowrap;
          border-width: 0;
        }
    </style>






</head>

<body.........完整代码请登录后点击上方下载按钮下载查看