three+gsap实现三维炫酷收藏点赞动画效果代码-html代码-BFW代码库

three+gsap实现三维炫酷收藏点赞动画效果代码

代码语言：html

代码描述：three+gsap实现三维炫酷收藏点赞动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&amp;display=swap'>

    <style>
        .button-star {
          --button-label-x: 24px;
          --button-label-success-opacity: 0;
          --button-star-scale: 0.75;
          --button-star-greyscale: 85%;
          --button-star-hue: 170deg;
          --button-star-opacity: 0.45;
          --button-star-add-opacity: 0;
          --button-star-add-y: 16px;
          --button-star-current-opacity: 1;
          --button-star-current-y: 0px;
          --button-star-new-opacity: 0;
          --button-star-new-y: 16px;
          -webkit-appearance: none;
             -moz-appearance: none;
                  appearance: none;
          border: none;
          cursor: pointer;
          background-color: #1f2024;
          color: #fff;
          border-radius: 13px;
          outline: none;
          margin: 0;
          padding: 0;
          font-family: "Poppins";
          font-size: 14px;
          font-weight: 600;
          line-height: 20px;
          position: relative;
          text-align: center;
          display: flex;
          box-shadow: inset 0 0 0 1px #35373f, 0px 1px 3px rgba(52, 54, 63, 0.1), 0px 4px 10px rgba(52, 54, 63, 0.15);
          transition: transform 0.15s;
          transform: translateZ(0);
        }
        .button-star:active {
          transform: scale(0.985, 0.98) translateZ(0);
        }
        .button-star canvas {
          display: block;
          width: 400px;
          height: 200px;
          position: absolute;
          z-index: 1;
          left: -176px;
          top: -84px;
          pointer-events: none;
          filter: Grayscale(var(--button-star-greyscale)) hue-rotate(var(--button-star-hue));
          transform: scale(var(--button-star-scale));
          transform-origin: 50% 52%;
          opacity: var(--button-star-opacity);
        }
        .button-star .label {
          width: 90px;
          padding: 10px 0;
          transform: translateZ(0);
        }
        .button-star .label .default {
          display: block;
          transform: translateX(var.........完整代码请登录后点击上方下载按钮下载查看