当前位置：首页 > 文章列表 > 文章 > 前端 > CSS按钮点击动画效果教程

CSS按钮点击动画效果教程

2025-10-30 12:33:31 0浏览收藏

1. 使用 :active 伪类实现简单点击反馈

这是最简单的方式，不需要 JavaScript。当用户按下按钮时，立即触发动画或过渡效果。

@keyframes clickEffect {
  0% { transform: scale(1); }
  50% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

button {
  padding: 12px 24px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:active {
  animation: clickEffect 0.2s ease;
}

这个方法适用于即时反馈，比如轻微缩放或颜色变化，用户体验自然。

2. 使用 JavaScript 控制类名触发动画

如果需要更复杂的点击动画（如涟漪、弹跳等），可以通过 JS 动态添加一个类来触发完整的 animation 播放。

HTML 示例：

CSS 定义动画和类：

@keyframes rippleClick {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

.ripple {
  animation: rippleClick 0.3s ease;
}

JavaScript 添加动画类：

document.getElementById('myBtn').addEventListener('click', function(e) {
this.classList.add('ripple');
setTimeout(() => this.classList.remove('ripple'), 300);
});

这种方式适合需要精确控制动画流程的场景，比如完成一次完整播放后再清除类。