使用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;
  width: 600px;
  height: 200px;
  position: relative;
}

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

.white {
  background-color: white;
  flex: 1;
  z-index: 1;
}

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

调整琴键位置

黑键需要覆盖在白键上方，通过负边距和z-index实现层叠效果。确保黑键的宽度和高度小于白键。

添加交互效果

为琴键添加悬停或点击效果：

.white:active {
  background-color: #ddd;
}

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

完整示例

将HTML和CSS结合，即可得到一个简单的钢琴块效果。调整尺寸和颜色以匹配实际需求。