css样式粒子散开的按钮

DHLSP15
于 2023-01-14 17:11:45 发布
阅读量177
点赞数
分类专栏： html 文章标签： html5 Powered by 金山文档
本文链接：https://blog.csdn.net/DHLSP15/article/details/128686989
版权
html 专栏收录该内容
22 篇文章 0 订阅
订阅专栏
<html lang="en">

<head>
  <meta charset="UTF-8">
  <!-- <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png"> -->
  <meta name="apple-mobile-web-app-title" content="CodePen">
  <!-- <link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">
  <link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111"> -->
  <title>css样式粒子散开的按钮</title>
  <style>
    body {
      display: grid;
      place-items: center;
      height: 100vh;
      margin: 0;
    }

    button {
      min-width: 135px;
      max-width: 200px;
      min-height: 50px;
      border: 0;
      outline: 0;
      color: white;
      background: #ee0979;
      background: linear-gradient(to right, #ee0979, #ff6a00);
      vertical-align: top;
    }

    button {
      cursor: pointer;
    }
  </style>

  <script>
    window.console = window.console || function (t) { };
  </script>

  <script>
    if (document.location.search.match(/type=embed/gi)) {
      window.parent.postMessage("resize", "*");
    }
  </script>
</head>

<body translate="no">
  <button>Button</button>

  <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>
  <script src="https://s3.us-east-2.amazonaws.com/zachsaucier-com/html2canvas.min.js"></script>
  <script id="rendered-js">
    var btn = document.querySelector("button");
    var ctx;

    var colorInfoElem = document.querySelector("#colorInfo");
    html2canvas(btn).then(canvas => {
      ctx = canvas.getContext("2d");

      createParticleCanvas();

      let reductionFactor = 17;
      btn.addEventListener("click", e => {
        // Get the color data for our button
        let width = btn.offsetWidth;
        let height = btn.offsetHeight;
        let colorData = ctx.getImageData(0, 0, width, height).data;

        // Keep track of how many times we've iterated (in order to reduce
        // the total number of particles create)
        let count = 0;

        // Go through every location of our button and create a particle
        for (let localX = 0; localX < width; localX++) {
          for (let localY = 0; localY < height; localY++) {
            if (count % reductionFactor === 0) {
              let index = (localY * width + localX) * 4;
              let rgbaColorArr = colorData.slice(index, index + 4);

              let bcr = btn.getBoundingClientRect();
              let globalX = bcr.left + localX;
              let globalY = bcr.top + localY;

              createParticleAtPoint(globalX, globalY, rgbaColorArr);
            }
            count++;
          }
        }
      });
    });


    /* An "exploding" particle effect that uses circles */
    var ExplodingParticle = function () {
      // Set how long we want our particle to animate for
      this.animationDuration = 1000; // in ms

      // Set the speed for our particle
      this.speed = {
        x: -5 + Math.random() * 10,
        y: -5 + Math.random() * 10
      };

      // Size our particle
      this.radius = 5 + Math.random() * 5;

      // Set a max time to live for our particle
      this.life = 30 + Math.random() * 10;
      this.remainingLife = this.life;

      // This function will be called by our animation logic later on
      this.draw = ctx => {
        let p = this;

        if (this.remainingLife > 0 &&
          this.radius > 0) {
          // Draw a circle at the current location
          ctx.beginPath();
          ctx.arc(p.startX, p.startY, p.radius, 0, Math.PI * 2);
          ctx.fillStyle = "rgba(" + this.rgbArray[0] + ',' + this.rgbArray[1] + ',' + this.rgbArray[2] + ", 1)";
          ctx.fill();

          // Update the particle's location and life
          p.remainingLife--;
          p.radius -= 0.25;
          p.startX += p.speed.x;
          p.startY += p.speed.y;
        }
      };
    };

    var particles = [];
    function createParticleAtPoint(x, y, colorData) {
      let particle = new ExplodingParticle();
      particle.rgbArray = colorData;
      particle.startX = x;
      particle.startY = y;
      particle.startTime = Date.now();

      particles.push(particle);
    }


    var particleCanvas, particleCtx;
    function createParticleCanvas() {
      // Create our canvas
      particleCanvas = document.createElement("canvas");
      particleCtx = particleCanvas.getContext("2d");

      // Size our canvas
      particleCanvas.width = window.innerWidth;
      particleCanvas.height = window.innerHeight;

      // Position out canvas
      particleCanvas.style.position = "absolute";
      particleCanvas.style.top = "0";
      particleCanvas.style.left = "0";

      // Make sure it's on top of other elements
      particleCanvas.style.zIndex = "1001";

      // Make sure other elements under it are clickable
      particleCanvas.style.pointerEvents = "none";

      // Add our canvas to the page
      document.body.appendChild(particleCanvas);
    }

    function update() {
      // Clear out the old particles
      if (typeof particleCtx !== "undefined") {
        particleCtx.clearRect(0, 0, window.innerWidth, window.innerHeight);
      }

      // Draw all of our particles in their new location
      for (let i = 0; i < particles.length; i++) {
        particles[i].draw(particleCtx);

        // Simple way to clean up if the last particle is done animating
        if (i === particles.length - 1) {
          let percent = (Date.now() - particles[i].startTime) / particles[i].animationDuration;

          if (percent > 1) {
            particles = [];
          }
        }
      }

      // Animate performantly
      window.requestAnimationFrame(update);
    }
    window.requestAnimationFrame(update);
//# sourceURL=pen.js
  </script>

  <canvas width="1502" height="874"
    style="position: absolute; top: 0px; left: 0px; z-index: 1001; pointer-events: none;"></canvas>
</body>

</html>