使用css制作钢琴块

使用 CSS 制作钢琴块

钢琴块通常由黑白键交替排列组成，可以通过 HTML 和 CSS 实现。以下是实现钢琴块的步骤：

HTML 结构

创建一个包含黑白键的容器，使用 <div> 元素模拟钢琴键：

<div class="piano">
  <div class="key white"></div>
  <div class="key black"></div>
  <div class="key white"></div>
  <div class="key black"></div>
  <div class="key white"></div>
  <div class="key white"></div>
  <div class="key black"></div>
  <div class="key white"></div>
  <div class="key black"></div>
  <div class="key white"></div>
  <div class="key black"></div>
  <div class="key white"></div>
</div>

CSS 样式

通过 CSS 设置钢琴键的样式和布局：

.piano {
  display: flex;
  position: relative;
  width: 600px;
  height: 200px;
  margin: 20px auto;
}

.key {
  border: 1px solid #000;
}

.white {
  width: 60px;
  height: 200px;
  background-color: #fff;
  z-index: 1;
}

.black {
  width: 40px;
  height: 120px;
  background-color: #000;
  margin-left: -20px;
  margin-right: -20px;
  z-index: 2;
}

交互效果

添加悬停或点击效果以模拟钢琴键的按下动作：

.white:active, .white:hover {
  background-color: #ddd;
}

.black:active, .black:hover {
  background-color: #333;
}

调整布局

确保黑白键正确对齐，黑键位于白键上方：

.piano {
  position: relative;
}

.black {
  position: absolute;
}

完整示例

将以上代码整合后，钢琴块会显示为黑白键交替的样式，悬停或点击时会有颜色变化反馈。可以根据需要调整键的数量和尺寸。

注意事项

• 黑白键的宽度和高度需合理设置，黑键通常比白键窄且短。
• 使用 z-index 确保黑键覆盖在白键上方。
• 通过 margin 负值调整黑键的位置，使其位于两个白键之间。