css制作钢琴块

使用CSS制作钢琴块

钢琴块可以通过HTML和CSS的配合实现，主要利用flexbox布局和伪元素来模拟钢琴的黑白键排列。

HTML结构

<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;
  width: 600px;
  height: 200px;
  background: #f0f0f0;
  border-radius: 5px;
}

.key.white {
  flex: 1;
  height: 100%;
  background: white;
  border: 1px solid #ccc;
  z-index: 1;
}

.key.black {
  position: absolute;
  width: 30px;
  height: 60%;
  background: black;
  z-index: 2;
  transform: translateX(-50%);
}

黑白键定位

黑键需要绝对定位覆盖在白键上方，通过left属性调整位置：

.key.black:nth-child(2) {
  left: 12.5%; /* 第一个黑键位置 */
}
.key.black:nth-child(4) {
  left: 37.5%; /* 第二个黑键位置 */
}
/* 其他黑键类似 */

交互效果

添加悬停和按下效果增强真实感：

.key.white:hover {
  background: #f8f8f8;
}
.key.black:hover {
  background: #333;
}
.key.white:active {
  background: #e0e0e0;
}
.key.black:active {
  background: #222;
}

完整示例

一个八度的钢琴块实现：

<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>

.piano {
  display: flex;
  position: relative;
  width: 840px;
  height: 300px;
  margin: 50px auto;
  background: #333;
  padding: 5px;
  border-radius: 10px;
}

.key {
  box-sizing: border-box;
}

.key.white {
  flex: 1;
  height: 100%;
  background: white;
  border: 1px solid #999;
  border-radius: 0 0 5px 5px;
  z-index: 1;
}

.key.black {
  position: absolute;
  width: 40px;
  height: 60%;
  background: black;
  border-radius: 0 0 5px 5px;
  z-index: 2;
  transform: translateX(-50%);
}

/* 黑键定位 */
.key.black:nth-child(2) { left: 8.33%; }
.key.black:nth-child(4) { left: 25%; }
.key.black:nth-child(7) { left: 41.66%; }
.key.black:nth-child(9) { left: 58.33%; }
.key.black:nth-child(11) { left: 75%; }

响应式调整

通过媒体查询适应不同屏幕：

@media (max-width: 768px) {
  .piano {
    width: 100%;
    height: 150px;
  }
  .key.black {
    width: 20px;
  }
}