当前位置：首页 > CSS

使用css制作钢琴块

2026-02-27 01:13:22CSS

使用HTML和CSS制作钢琴块

钢琴块可以通过HTML和CSS的组合来创建，利用div元素和样式属性来模拟钢琴键盘的外观。以下是实现方法：

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: 50px auto;
}

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

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

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

添加交互效果

为钢琴块添加悬停或点击效果，使其更接近真实钢琴的交互体验：

.white:hover {
  background: #eee;
}

.black:hover {
  background: #333;
}

.white:active {
  background: #ddd;
}

.black:active {
  background: #222;
}

优化布局和外观

调整钢琴键盘的布局，使其更符合真实钢琴的排列方式：

.piano {
  background: #444;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.key {
  cursor: pointer;
}

.white {
  border-radius: 0 0 5px 5px;
}

.black {
  border-radius: 0 0 5px 5px;
}

响应式设计

确保钢琴块在不同屏幕尺寸下都能正常显示：

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

添加音效（可选）

结合JavaScript为每个钢琴块添加音效：

使用css制作钢琴块

document.querySelectorAll('.key').forEach(key => {
  key.addEventListener('click', () => {
    // 播放对应音调
    const audio = new Audio('piano-note.mp3');
    audio.play();
  });
});

通过以上步骤，可以创建一个视觉上逼真且具有基本交互功能的CSS钢琴块。