当前位置：首页 > CSS

css键盘制作

2026-02-13 03:50:53CSS

CSS键盘制作方法

使用HTML和CSS创建一个虚拟键盘需要结合结构布局和样式设计。以下是实现步骤：

HTML结构

<div class="keyboard">
  <div class="row">
    <button class="key">1</button>
    <button class="key">2</button>
    <!-- 更多按键... -->
  </div>
  <!-- 更多行... -->
</div>

CSS样式

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

.row {
  display: flex;
  gap: 5px;
  justify-content: center;
}

.key {
  width: 50px;
  height: 50px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: white;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.1s;
}

.key:hover {
  background: #e0e0e0;
}

.key:active {
  transform: scale(0.95);
  background: #d0d0d0;
}

进阶样式技巧

特殊键位样式

.key.space {
  width: 300px;
}

.key.enter {
  width: 100px;
}

.key.shift {
  width: 120px;
}

响应式设计

@media (max-width: 600px) {
  .keyboard {
    width: 100%;
  }
  .key {
    width: 8vw;
    height: 8vw;
    font-size: 3vw;
  }
}

交互效果实现

按键高亮效果

.key.active {
  background: #4CAF50;
  color: white;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}

JavaScript交互示例

document.querySelectorAll('.key').forEach(key => {
  key.addEventListener('mousedown', () => {
    key.classList.add('active');
  });

  key.addEventListener('mouseup', () => {
    key.classList.remove('active');
  });
});

主题定制

暗色主题

.keyboard.dark {
  background: #333;
}

.keyboard.dark .key {
  background: #555;
  color: white;
  border-color: #666;
}

.keyboard.dark .key:hover {
  background: #666;
}

css键盘制作