css制作钢琴块

2026-02-26 23:26:42CSS

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

css制作钢琴块

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

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

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

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

添加交互效果

为了使钢琴块更具交互性，可以为琴键添加悬停和点击效果：

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

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

.white:active {
  background: #ddd;
}

.black:active {
  background: #111;
}

响应式设计

为了让钢琴块适应不同屏幕尺寸，可以添加媒体查询：

css制作钢琴块

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

动画效果

为琴键按下添加动画效果：

.key {
  transition: all 0.1s ease;
}

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

.black:active {
  transform: translateY(1px);
}

完整示例

以下是一个完整的钢琴块CSS实现示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    .piano {
      display: flex;
      position: relative;
      width: 600px;
      height: 200px;
      margin: 20px auto;
    }

    .key {
      border: 1px solid #000;
      transition: all 0.1s ease;
    }

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

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

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

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

    .white:active {
      background: #ddd;
      transform: translateY(2px);
    }

    .black:active {
      background: #111;
      transform: translateY(1px);
    }

    @media (max-width: 600px) {
      .piano {
        width: 100%;
      }
      .white {
        width: 10%;
      }
      .black {
        width: 6%;
        margin-left: -3%;
      }
    }
  </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>
</body>
</html>

这个示例创建了一个包含12个琴键的钢琴块，其中7个白键和5个黑键，并添加了交互效果和响应式设计。可以根据需要调整琴键数量和样式。