使用 HTML 和 CSS 的跳舞键效果

在这篇教程中，我们将介绍如何使用 HTML 和 CSS 来创建一个跳舞键效果。跳舞键是一种常见的交互式动画效果，它通过按下键盘上的键来触发音乐和舞蹈动画。

第一步：HTML 结构

首先，我们需要创建一个 HTML 结构来显示跳舞键。以下是我们的示例 HTML 结构：

<div class="dancemat">
  <div class="key up"></div>
  <div class="key left"></div>
  <div class="key down"></div>
  <div class="key right"></div>
</div>

我们创建了一个名为 dancemat 的 div 元素，其中包含了四个名为 key 的 div 元素。这四个元素代表跳舞键的四个方向：上、下、左、右。

第二步：CSS 样式

接下来，我们需要为我们的跳舞键添加一些 CSS 样式以使其具有更好的外观和交互性。

首先，我们需要添加一些基本的样式：

.dancemat {
  width: 420px;
  height: 420px;
  background-color: #333;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  position: relative;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

在上面的样式中，我们设置了跳舞键的背景色、边框半径、宽度和高度以及阴影效果。我们还使用了 display: flex 属性来使我们的 div 元素成为一个 flex 容器，并使用 justify-content: center 和 align-items: center 来使子元素垂直和水平居中对齐。

接下来，我们来为每个 div 元素（也就是我们的跳舞键）添加样式：

.key {
  width: 100px;
  height: 100px;
  background-color: #444;
  border-radius: 50%;
  position: relative;
  z-index: 1;
  margin: 20px;
  transition: all 0.1s ease-in-out;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}

.key:before {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.2;
  position: absolute;
  top: 0;
  left: 0;
}

.key.up:before {
  transform: rotate(45deg);
}

.key.left:before {
  transform: rotate(135deg);
}

.key.down:before {
  transform: rotate(225deg);
}

.key.right:before {
  transform: rotate(315deg);
}

.key.active {
  transform: scale(0.9);
}

在上面的样式中，我们首先设置了跳舞键的大小、背景色、边框半径、阴影效果和子元素的过渡效果。我们还使用了 position: relative 属性来使子元素的定位相对于父元素，并使用 z-index: 1 属性来使子元素处于父级之上。

我们使用了 :before 伪元素来添加一个白色的蒙版，以便在键被激活时使其显得更加动态。我们还使用 transform: rotate() 属性来旋转伪元素，以使其呈现出四个方向。最后，我们使用 transform: scale() 属性来缩小已激活的跳舞键。

第三步：JavaScript 交互

最后，我们需要为我们的跳舞键添加一些 JavaScript 交互。

我们可以使用 keydown 和 keyup 事件来检测用户按下和松开键盘上的键。然后，我们可以使用 classList 属性来为相应的跳舞键添加或删除 active 类来激活或取消激活它们。

以下是示例 JavaScript 代码：

document.addEventListener("keydown", function (event) {
  if (event.code === "ArrowUp") {
    document.querySelector(".key.up").classList.add("active");
  } else if (event.code === "ArrowLeft") {
    document.querySelector(".key.left").classList.add("active");
  } else if (event.code === "ArrowDown") {
    document.querySelector(".key.down").classList.add("active");
  } else if (event.code === "ArrowRight") {
    document.querySelector(".key.right").classList.add("active");
  }
});

document.addEventListener("keyup", function (event) {
  if (event.code === "ArrowUp") {
    document.querySelector(".key.up").classList.remove("active");
  } else if (event.code === "ArrowLeft") {
    document.querySelector(".key.left").classList.remove("active");
  } else if (event.code === "ArrowDown") {
    document.querySelector(".key.down").classList.remove("active");
  } else if (event.code === "ArrowRight") {
    document.querySelector(".key.right").classList.remove("active");
  }
});

在上面的代码中，我们首先使用 document.addEventListener("keydown", function (event) {...}) 来添加一个键盘按下事件监听器。然后，我们使用 event.code 属性来检测按下的键的键码是否为上、下、左、右键。如果是，我们就使用 classList.add() 方法为相应的跳舞键添加 active 类。

我们使用类似的方式来添加 document.addEventListener("keyup", function (event) {...}) 键盘松开事件监听器。在这个事件监听器中，我们使用 classList.remove() 利用方法移除 active 类，以便在松开键盘时取消激活相应的跳舞键。

实施完上面的步骤，我们可以获得一个基于 HTML、CSS 和 JavaScript 的跳舞键效果。

示例代码戳 --> GitHub gist

结论

在这篇教程中，我们已经学会了如何使用 HTML、CSS 和 JavaScript 来创建一个有趣的跳舞键效果。我们首先创建了一个 HTML 结构来显示跳舞键，然后为这些键添加了一些 CSS 样式来使它们具有更好的外观和交互性。最后，我们添加了一些 JavaScript 交互来使跳舞键响应键盘事件，并在键被按下时触发动画。