css键盘制作

CSS 键盘制作方法

使用 HTML 和 CSS 创建键盘布局

<div class="keyboard">
  <div class="row">
    <div class="key">Q</div>
    <div class="key">W</div>
    <div class="key">E</div>
    <!-- 其他按键 -->
  </div>
</div>

.keyboard {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: #333;
  padding: 10px;
  border-radius: 5px;
}

.row {
  display: flex;
  gap: 5px;
}

.key {
  width: 40px;
  height: 40px;
  background: #eee;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
  box-shadow: 0 2px 0 #999;
}

添加悬停和按下效果

.key:hover {
  background: #ddd;
}

.key:active {
  transform: translateY(2px);
  box-shadow: none;
}

实现特殊按键样式

.key.space {
  width: 200px;
}

.key.enter {
  width: 80px;
}

.key.shift {
  width: 90px;
}

.key.caps {
  background: #4CAF50;
  color: white;
}

添加键盘响应功能（需要JavaScript）

document.addEventListener('keydown', function(e) {
  const key = document.querySelector(`.key[data-key="${e.key.toUpperCase()}"]`);
  if(key) {
    key.classList.add('active');
  }
});

document.addEventListener('keyup', function(e) {
  const key = document.querySelector(`.key[data-key="${e.key.toUpperCase()}"]`);
  if(key) {
    key.classList.remove('active');
  }
});

完整键盘布局示例

<div class="keyboard">
  <div class="row">
    <div class="key" data-key="`">`</div>
    <div class="key" data-key="1">1</div>
    <div class="key" data-key="2">2</div>
    <!-- 完整第一行按键 -->
  </div>
  <div class="row">
    <div class="key tab" data-key="Tab">Tab</div>
    <div class="key" data-key="Q">Q</div>
    <div class="key" data-key="W">W</div>
    <!-- 完整第二行按键 -->
  </div>
  <!-- 其他行 -->
</div>

响应式设计调整

@media (max-width: 600px) {
  .key {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  .key.space {
    width: 150px;
  }
}