css制作钢琴块

CSS 制作钢琴块的方法

使用CSS可以创建视觉上类似钢琴键盘的块状布局。以下是实现方法：

基础钢琴键盘结构

钢琴键盘通常由黑白键交替排列组成。白键较宽，黑键较窄且位于白键上方。

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

CSS样式设置

.piano {
  display: flex;
  position: relative;
  height: 200px;
}

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

.white {
  width: 40px;
  height: 100%;
  background: #fff;
  z-index: 1;
}

.black {
  width: 24px;
  height: 60%;
  background: #000;
  position: absolute;
  margin-left: -12px;
  z-index: 2;
}

完整八度实现

一个完整的钢琴八度包含7个白键和5个黑键：

<div class="piano">
  <div class="key white" data-note="C"></div>
  <div class="key black" data-note="C#"></div>
  <div class="key white" data-note="D"></div>
  <div class="key black" data-note="D#"></div>
  <div class="key white" data-note="E"></div>
  <div class="key white" data-note="F"></div>
  <div class="key black" data-note="F#"></div>
  <div class="key white" data-note="G"></div>
  <div class="key black" data-note="G#"></div>
  <div class="key white" data-note="A"></div>
  <div class="key black" data-note="A#"></div>
  <div class="key white" data-note="B"></div>
</div>

交互效果增强

添加悬停和点击效果使钢琴更具交互性：

.white:hover {
  background: #eee;
}

.black:hover {
  background: #333;
}

.white:active {
  background: #ddd;
}

.black:active {
  background: #222;
}

响应式调整

通过媒体查询使钢琴键盘适应不同屏幕尺寸：

@media (max-width: 600px) {
  .white {
    width: 30px;
  }
  .black {
    width: 18px;
    margin-left: -9px;
  }
}

这种CSS钢琴块实现方式可以扩展为完整的虚拟钢琴界面，配合JavaScript添加音效功能。