使用css制作钢琴块

使用CSS制作钢琴块

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

HTML结构

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

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

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

.white {
  width: 60px;
  height: 100%;
  background-color: white;
  z-index: 1;
}

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

交互效果（可选）

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

.white:hover {
  background-color: #f0f0f0;
}

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

响应式调整

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

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

进阶优化

1. 琴键标签：在琴键上添加字母标记（如C、D、E等）：

   

   <div class="key white">C</div>

2. 阴影效果：为黑色琴键添加立体感：

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

3. 点击动画：模拟按下琴键的效果：

   .key:active {
     transform: translateY(2px);
   }

通过以上方法，可以快速实现一个视觉清晰的CSS钢琴块，并根据需要扩展交互功能。