css动画按键制作

CSS动画按键制作方法

使用CSS动画制作按键效果可以通过transition、transform和animation属性实现交互感和视觉反馈。

基础按键样式

.button {
  padding: 12px 24px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

悬停动画效果

.button:hover {
  background-color: #45a049;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

点击动画效果

.button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: all 0.1s ease;
}

脉冲动画效果

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

.button.pulse {
  animation: pulse 2s infinite;
}

波纹点击效果

.button.ripple {
  position: relative;
  overflow: hidden;
}

.button.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.8) 10%, transparent 10%) no-repeat 50%;
  transform: scale(10,10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.button.ripple:active:after {
  transform: scale(0,0);
  opacity: 0.3;
  transition: 0s;
}

实现注意事项

• 使用transition属性确保动画平滑过渡，避免突兀变化
• transform属性性能较好，适合做位移、缩放等效果
• 复杂动画考虑使用@keyframes定义多阶段动画
• 移动端注意添加-webkit-tap-highlight-color: transparent消除默认点击高亮
• 考虑添加will-change: transform优化性能，但不要过度使用

这些CSS技术可以组合使用，创造出各种交互式按钮效果，从简单的悬停变化到复杂的点击动画序列。