css动画按键制作

CSS动画按键制作方法

使用CSS可以创建具有动画效果的按钮，主要通过transition、transform和@keyframes实现交互反馈和动态效果。

基础样式与悬停动画

.btn {
  padding: 12px 24px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn:hover {
  background: #2980b9;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

点击按压效果

.btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

关键帧动画

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.pulse-btn {
  animation: pulse 2s infinite;
}

3D立体按钮

.raised-btn {
  position: relative;
  background: #2ecc71;
  border: none;
  box-shadow: 0 6px 0 #27ae60;
  transition: top 0.1s, box-shadow 0.1s;
}

.raised-btn:active {
  top: 3px;
  box-shadow: 0 3px 0 #27ae60;
}

渐变颜色动画

.gradient-btn {
  background: linear-gradient(90deg, #ff8a00, #e52e71);
  background-size: 200% auto;
  transition: background-position 0.5s;
}

.gradient-btn:hover {
  background-position: right center;
}

实现注意事项

• 使用will-change属性优化性能：will-change: transform;
• 移动端添加:active状态样式，避免点击无反馈
• 动画时长控制在300ms内，确保响应迅速
• 使用prefers-reduced-motion媒体查询为运动敏感用户提供替代方案

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
    animation: none;
  }
}