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

代码语言：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(--button-label-x));
        }
        .button-star .label .default .success {
          opacity: var(--button-label-success-opacity);
        }
        .button-star .number {
          padding: 10px 0;
          width: 44px;
          position: relative;
          transform: translateZ(0);
        }
        .button-star .number:before {
          content: "";
          position: absolute;
          left: 0;
          top: 1px;
          bottom: 1px;
          width: 1px;
          background-color: #35373f;
        }
        .button-star .number .current {
          color: #8a8d9b;
          opacity: var(--button-star-current-opacity);
          transform: translateY(var(--button-star-current-y));
          transition: color 0.2s;
          display: block;
        }
        .button-star .number .new {
          opacity: var(--button-star-new-opacity);
          transform: translateY(var(--button-star-new-y));
          color: #fbfaaa;
          position: absolute;
          top: 10px;
          left: 0;
          right: 0;
          display: block;
        }
        .button-star .number .add {
          position: absolute;
          bottom: 100%;
          left: 0;
          right: 0;
          opacity: var(--button-star-add-opacity);
          transform: translateY(var(--button-star-add-y));
          pointer-events: none;
          color: #d0d0db;
          display: block;
        }
        
        html {
          box-sizing: border-box;
          -webkit-font-smoothing: antialiased;
        }
        
        * {
          box-sizing: inherit;
        }
        *:before, *:after {
          box-sizing: inherit;
        }
        
        body {
          min-height: 100vh;
          display: flex;
          font-family: "Inter", Arial;
          justify-content: center;
          align-items: center;
          background: #f4f5fa;
        }
        body .twitter {
          position: fixed;
          display: block;
          right: 12px;
          bottom: 12px;
        }
        body .twitter svg {
          width: 32px;
          height: 32px;
          fill: #1da1f2;
        }
    </style>



</head>

<body>
    <button class="button-star">
  <canvas></canvas>
  <div class="label">
    <span class="default">Star<span class="success">red</span></span>
  </div>
  <div class="number">
    <span class="current">31</span>
    <span class="new">32</span>
    <div class="add">+1</div>
  </div>
</button>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.110.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/DRACOLoader.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/GLTFLoader.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.5.2.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/MotionPathPlugin.min.js"></script>
    <script>
        const addLight = (x, y, z, i, s) => {
          const light = new THREE.PointLight(0xffffff, i);
          light.position.set(x, y, z);
          s.add(light);
        };
        
        document.querySelectorAll(".button-star").forEach(button => {
          const width = 400;
          const height = 200;
        
          const canvas = button.querySelector("canvas");
        
          const renderer = new THREE.WebGLRenderer({
            canvas: canvas,
            context: canvas.getContext("webgl2"),
            antialias: true,
            alpha: true });
        
        
          renderer.setSize(width, height);
          renderer.setPixelRatio(4);
        
          const scene = new THREE.Scene();
          const camera = new THREE.PerspectiveCamera(45, width / height, 4, 100);
        
          camera.position.set(0, 0, 30);
        
          addLight(0, 1, 5, 0.2, scene);
          addLight(0, 2, 0, 0.3, scene);
          addLight(5, 0, 1, 0.2, scene);
          addLight(-5, 0, 1, 0.2, scene);
          addLight(3, 0, 5, 0.6, scene);
        
          scene.add(new THREE.AmbientLight(0xffffff));
        
          const loader = new THREE.GLTFLoader();
        
          loader.setCrossOrigin("anonymous");
  .........完整代码请登录后点击上方下载按钮下载查看