使用css制作钢琴块

使用CSS制作钢琴块

钢琴块通常由黑白相间的琴键组成，可以通过CSS的flexbox或grid布局实现。以下是一个简单的实现方法：

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>

CSS样式

通过绝对定位和尺寸调整实现黑白琴键的交错排列：

.piano {
  display: flex;
  position: relative;
  width: 300px;
  height: 150px;
}

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

.white {
  width: 40px;
  height: 100%;
  background: #fff;
}

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

/* 调整黑键位置 */
.black:nth-child(2) {
  left: 30px;
}
.black:nth-child(4) {
  left: 110px;
}

交互效果

添加悬停或点击效果增强用户体验：

.white:hover {
  background: #f0f0f0;
}

.black:hover {
  background: #333;
}

完整钢琴布局

扩展为完整钢琴（如包含C到B的7个白键和5个黑键）：

.piano {
  width: 560px; /* 7白键*40px + 间距 */
}
.black:nth-child(2) { left: 30px; }  /* C# */
.black:nth-child(4) { left: 110px; } /* D# */
.black:nth-child(7) { left: 190px; } /* F# */
.black:nth-child(9) { left: 270px; } /* G# */
.black:nth-child(11) { left: 350px; }/* A# */

进阶优化

1. 阴影效果：为琴键添加box-shadow增强立体感

   .black {
     box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
   }

2. 响应式设计：使用vw单位使钢琴适应不同屏幕

   .piano {
     width: 80vw;
   }

3. 音效触发：通过JavaScript关联琴键与音频文件

   document.querySelector('.key').addEventListener('click', () => {
     new Audio('piano_c.mp3').play();
   });

通过以上方法可以创建一个视觉逼真且具备基础交互功能的CSS钢琴块。实际项目中可根据需求调整琴键数量、颜色或动画效果。