送学妹满满爱心 ❤️ 学长用 CSS + JS 点亮了整个屏幕

2023-10-31 14:37:30

午休时间，我正津津有味地吃着盒饭，突然，暗恋已久的学妹拉了拉我的衣袖，用期待的眼神看着我说：“学长学长，你能不能让这些爱心变成五颜六色的吗~”。我一听，口水差点流出来了，学妹也太会了吧！她怎么知道我喜欢爱心的，瞬间我的大脑飞速运转，暗自庆幸平时有学习HTML和JavaScript，心想：“不就是改个颜色嘛，小意思！”。

画个小爱心

为了实现这个功能，首先我们需要用 CSS 来画一个小爱心。具体步骤如下：

.heart {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: red;
  position: absolute;
}

这段代码创建了一个红色的小爱心，它的大小是 100px * 100px，并且是绝对定位的。

画一大堆爱心

接下来，我们要画一大堆爱心。我们可以使用 JavaScript 来实现这个功能。具体步骤如下：

for (let i = 0; i < 100; i++) {
  let heart = document.createElement("div");
  heart.classList.add("heart");
  heart.style.left = Math.random() * window.innerWidth + "px";
  heart.style.top = Math.random() * window.innerHeight + "px";
  document.body.appendChild(heart);
}

这段代码创建了一个循环，它将创建一个包含 100 个小爱心的数组。然后，它将每个爱心添加到 body 元素中。

打造魔法棒

最后，我们要打造一把魔法棒，能让我们这些小爱心变成各种各样的颜色。我们可以使用 Element.animate() 方法来实现这个功能。具体步骤如下：

let hearts = document.querySelectorAll(".heart");

hearts.forEach((heart) => {
  heart.addEventListener("click", () => {
    heart.animate([
      { backgroundColor: "red" },
      { backgroundColor: "orange" },
      { backgroundColor: "yellow" },
      { backgroundColor: "green" },
      { backgroundColor: "blue" },
      { backgroundColor: "indigo" },
      { backgroundColor: "violet" },
    ], {
      duration: 1000,
      iterations: Infinity,
    });
  });
});