使用css制作钢琴

2026-04-02 16:54:43CSS

使用CSS制作钢琴键盘

钢琴键盘由黑白键交替排列组成，黑键通常位于白键上方。以下方法通过HTML和CSS实现视觉上的钢琴效果。

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: 800px;
  height: 200px;
  margin: 0 auto;
}

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

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

.black {
  width: 24px;
  height: 100px;
  background: #000;
  margin-left: -12px;
  margin-right: -12px;
  z-index: 2;
}

键盘布局优化

黑白键需要精确交错排列。每7个白键对应5个黑键，采用绝对定位调整黑键位置：

.piano .black {
  position: absolute;
}

/* 示例定位第一个黑键 */
.piano .black:nth-child(2) {
  left: 30px;
}

交互效果增强

添加悬停和按下效果提升真实感：

.white:hover {
  background: #eee;
}

.black:hover {
  background: #333;
}

.white:active {
  background: #ddd;
}

.black:active {
  background: #222;
}

完整音阶实现

完整钢琴通常包含88个键，可通过循环生成HTML或使用JavaScript动态创建。示例实现两个八度：

<div class="piano">
  <!-- C4到B4的白键 -->
  <div class="key white" data-note="C"></div>
  <div class="key black" data-note="C#"></div>
  <!-- 更多键位... -->
</div>

响应式调整

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

@media (max-width: 600px) {
  .piano {
    width: 100%;
  }
  .white {
    width: 10%;
  }
  .black {
    width: 6%;
    height: 60%;
  }
}

进阶效果（可选）

添加标签或音高标识：

使用css制作钢琴

.key::after {
  content: attr(data-note);
  position: absolute;
  bottom: 10px;
  width: 100%;
  text-align: center;
}

.black::after {
  color: white;
}

通过组合这些技术，可以创建出视觉精确且具备基础交互效果的CSS钢琴键盘。实际音乐应用需结合JavaScript处理音频触发。