当前位置：首页 > CSS

css制作键盘

2026-01-28 11:18:11CSS

使用CSS制作键盘效果

通过CSS可以模拟一个虚拟键盘的外观和交互效果，以下是实现方法：

css制作键盘

键盘布局结构

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

基础样式设计

.keyboard {
  display: inline-block;
  background: #2c3e50;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.keyboard-row {
  display: flex;
  margin-bottom: 10px;
  justify-content: center;
}

.key {
  width: 50px;
  height: 50px;
  margin: 0 5px;
  background: #34495e;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 4px 0 #2c3e50;
  transition: all 0.1s;
}

按键交互效果

.key:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 #2c3e50;
  background: #2980b9;
}

.key:hover {
  background: #3d566e;
}

.key.large {
  width: 80px;
}

.key.extra-large {
  width: 120px;
}

特殊按键样式

.key.space {
  width: 300px;
}

.key.function {
  background: #7f8c8d;
}

.key.enter {
  background: #27ae60;
}

.key.shift {
  background: #f39c12;
}

.key.backspace {
  background: #e74c3c;
}

响应式调整

@media (max-width: 768px) {
  .key {
    width: 30px;
    height: 40px;
    font-size: 14px;
  }

  .key.large {
    width: 50px;
  }

  .key.extra-large {
    width: 80px;
  }

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

动画效果增强

@keyframes press {
  0% { transform: scale(1); }
  50% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

.key.pressed {
  animation: press 0.2s ease;
  background: #3498db;
}

JavaScript交互

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

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

  key.addEventListener('mouseleave', () => {
    key.classList.remove('pressed');
  });
});

通过以上CSS和HTML的组合，可以创建一个具有视觉吸引力和交互效果的虚拟键盘。可以根据需要调整颜色、尺寸和布局以适应不同的设计需求。