使用css制作钢琴块
使用 CSS 制作钢琴块
钢琴块通常由黑白键交替排列组成，可以通过 HTML 和 CSS 实现。以下是实现钢琴块的步骤：
HTML 结构
创建一个包含黑白键的容器，使用 <div> 元素模拟钢琴键：
<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: 20px auto;
}
.key {
border: 1px solid #000;
}
.white {
width: 60px;
height: 200px;
background-color: #fff;
z-index: 1;
}
.black {
width: 40px;
height: 120px;
background-color: #000;
margin-left: -20px;
margin-right: -20px;
z-index: 2;
}交互效果
添加悬停或点击效果以模拟钢琴键的按下动作：
.white:active, .white:hover {
background-color: #ddd;
}
.black:active, .black:hover {
background-color: #333;
}调整布局
确保黑白键正确对齐，黑键位于白键上方：
.piano {
position: relative;
}
.black {
position: absolute;
}完整示例
将以上代码整合后，钢琴块会显示为黑白键交替的样式，悬停或点击时会有颜色变化反馈。可以根据需要调整键的数量和尺寸。
注意事项
- 黑白键的宽度和高度需合理设置，黑键通常比白键窄且短。
- 使用
z-index确保黑键覆盖在白键上方。 - 通过
margin负值调整黑键的位置，使其位于两个白键之间。
