弹指神灭？花里胡哨的按钮美学诞生

前端

2023-11-26 22:12:47

揭开花里胡哨的秘密：

所谓花里胡哨，本质上是创意十足的代码美学，是艺术与技术的完美结合。它不是毫无意义的堆砌，而是合理且不失美感的创意，可以极大提升用户体验。

粒子的消逝：

粒子消散按钮，顾名思义，就是点击按钮后，按钮会以粒子的形式逐渐消散，直至消失。这种特效十分酷炫，很容易吸引用户的注意力。

实现原理：

首先，我们需要为按钮设置一个点击事件，当用户点击按钮时，执行相应的代码。

然后，我们需要使用javascript来创建粒子效果。我们可以通过定义一个粒子类，来控制每个粒子的行为，例如，粒子的位置、速度、加速度等。

接下来，我们需要使用css来控制粒子的样式，例如，粒子的颜色、大小、透明度等。

最后，我们需要将这些粒子添加到按钮中，并让它们随着时间推移而逐渐消散。

代码实现：

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <button id="button">点击我</button>

  <script src="script.js"></script>
</body>
</html>

#button {
  width: 100px;
  height: 50px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
}

.particle {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  animation: move 1s ease-in-out infinite;
}

@keyframes move {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(100px, 100px);
  }
}

// 定义粒子类
class Particle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.vx = Math.random() * 2 - 1;
    this.vy = Math.random() * 2 - 1;
    this.ax = 0;
    this.ay = 0;
  }

  update() {
    this.x += this.vx;
    this.y += this.vy;
    this.vx += this.ax;
    this.vy += this.ay;
  }

  draw(ctx) {
    ctx.fillStyle = "#fff";
    ctx.fillRect(this.x, this.y, 5, 5);
  }
}

// 定义按钮类
class Button {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.width = 100;
    this.height = 50;
    this.particles = [];
  }

  draw(ctx) {
    ctx.fillStyle = "#007bff";
    ctx.fillRect(this.x, this.y, this.width, this.height);

    for (let particle of this.particles) {
      particle.draw(ctx);
    }
  }

  update() {
    for (let particle of this.particles) {
      particle.update();
    }
  }

  click() {
    for (let i = 0; i < 100; i++) {
      let particle = new Particle(this.x + this.width / 2, this.y + this.height / 2);
      this.particles.push(particle);
    }
  }
}

// 创建画布
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 创建按钮
const button = new Button(100, 100);

// 监听点击事件
button.addEventListener("click", () => {
  button.click();
});

// 游戏循环
function gameLoop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  button.draw(ctx);
  button.update();

  requestAnimationFrame(gameLoop);
}

gameLoop();