css键盘制作

使用 CSS 制作键盘效果

通过 CSS 可以模拟键盘按键的样式和交互效果，以下是一种实现方式：

HTML 结构

<div class="keyboard">
  <div class="key">Q</div>
  <div class="key">W</div>
  <div class="key">E</div>
  <!-- 更多按键 -->
</div>

CSS 样式

.keyboard {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 10px;
  background: #333;
  border-radius: 5px;
  max-width: 800px;
}

.key {
  width: 40px;
  height: 40px;
  background: #eee;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
  font-weight: bold;
  box-shadow: 0 2px 0 #999;
  transition: all 0.1s;
  cursor: pointer;
}

.key:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 #999;
  background: #ddd;
}

.key.large {
  width: 80px;
}

.key.space {
  width: 200px;
}

添加交互效果

为键盘添加按下/抬起的状态反馈：

.key.pressed {
  background: #ffcc00;
  transform: translateY(2px);
  box-shadow: 0 0 0 #999;
}

JavaScript 监听键盘事件：

document.addEventListener('keydown', (e) => {
  const key = document.querySelector(`.key:contains("${e.key.toUpperCase()}")`);
  if(key) key.classList.add('pressed');
});

document.addEventListener('keyup', (e) => {
  const key = document.querySelector(`.key:contains("${e.key.toUpperCase()}")`);
  if(key) key.classList.remove('pressed');
});

响应式键盘布局

针对不同设备调整键盘尺寸：

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

  .key.large {
    width: 60px;
  }

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

高级视觉效果

添加渐变和发光效果：

.key {
  background: linear-gradient(to bottom, #f5f5f5, #e0e0e0);
}

.key:hover {
  box-shadow: 0 0 5px rgba(255, 204, 0, 0.5);
}

.key.pressed {
  box-shadow: 0 0 10px rgba(255, 204, 0, 0.8);
}

这种实现方式创建了一个视觉上接近真实键盘的CSS组件，可以通过添加更多样式和JavaScript交互来增强用户体验。