css制作钢琴块

2026-01-16 10:32:48CSS

使用CSS制作钢琴块

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

css制作钢琴块

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

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

.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;
}

添加交互效果

为钢琴块添加悬停和点击效果，使其更接近真实钢琴：

css制作钢琴块

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

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

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

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

响应式设计

使用媒体查询使钢琴块在不同设备上都能正常显示：

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

  .white {
    width: 10%;
  }

  .black {
    width: 6%;
    margin-left: -3%;
    margin-right: -3%;
  }
}

完整钢琴键盘

完整的钢琴键盘包含88个键（52个白键和36个黑键），可以通过以下方式扩展：

.piano {
  display: flex;
  width: 100%;
  overflow-x: auto;
}

.white {
  flex: 1;
  min-width: 30px;
  height: 200px;
}

.black {
  width: 20px;
  height: 120px;
  margin: 0 -10px;
}

通过调整这些CSS属性，可以创建出不同样式和大小的钢琴块效果。