当前位置：首页 > CSS

css制作钢琴块

2026-03-31 22:39:35CSS

使用CSS制作钢琴块

钢琴块可以通过HTML和CSS的简单组合来实现，主要利用div元素和CSS样式来模拟钢琴的黑白键。以下是一个基本的实现方法。

创建HTML结构

钢琴通常由黑白键交替排列组成，白键较宽，黑键较窄且位于白键上方。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>

设置CSS样式

通过CSS定义钢琴键的尺寸、颜色和布局：

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

.key {
  position: relative;
}

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

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

调整钢琴键布局

黑键需要覆盖在白键上方，因此使用负边距和z-index来实现重叠效果。钢琴的完整布局可能需要调整每个黑键的位置，确保其位于两个白键之间。

添加交互效果

为钢琴键添加悬停或点击效果，使其更具交互性：

.white:active, .white:hover {
  background: #eee;
}

.black:active, .black:hover {
  background: #333;
}

完整示例代码

以下是一个包含8个白键和5个黑键的简单钢琴示例：

css制作钢琴块

<!DOCTYPE html>
<html>
<head>
  <style>
    .piano {
      display: flex;
      position: relative;
      width: 480px;
      height: 200px;
      margin: 50px auto;
    }
    .key {
      position: relative;
    }
    .white {
      width: 60px;
      height: 200px;
      background: white;
      border: 1px solid #ccc;
      z-index: 1;
    }
    .black {
      width: 40px;
      height: 120px;
      background: black;
      margin-left: -20px;
      margin-right: -20px;
      z-index: 2;
    }
    .white:active, .white:hover {
      background: #eee;
    }
    .black:active, .black:hover {
      background: #333;
    }
  </style>
</head>
<body>
  <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 class="key white"></div>
  </div>
</body>
</html>