css动画按钮制作

基础按钮动画（悬停效果）

使用 transition 实现悬停时的颜色和缩放效果：

.button {
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
}
.button:hover {
  background-color: #2980b9;
  transform: scale(1.05);
}

关键帧动画（点击效果）

通过 @keyframes 定义点击时的脉冲动画：

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.button:active {
  animation: pulse 0.3s ease;
}

边框动画（悬停边框高亮）

利用伪元素实现动态边框效果：

.button {
  position: relative;
  overflow: hidden;
}
.button::after {
  content: '';
  position: absolute;
  left: -100%;
  top: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  transition: left 0.4s;
}
.button:hover::after {
  left: 0;
}

3D 按压效果

结合 box-shadow 和 transform 模拟立体按钮：

.button {
  box-shadow: 0 4px 0 #2c3e50;
  transform: translateY(0);
  transition: box-shadow 0.2s, transform 0.2s;
}
.button:active {
  box-shadow: 0 1px 0 #2c3e50;
  transform: translateY(3px);
}

渐变背景动画

通过 background-position 实现渐变流动效果：

.button {
  background: linear-gradient(90deg, #ff7e5f, #feb47b);
  background-size: 200% auto;
  transition: background-position 0.5s;
}
.button:hover {
  background-position: right center;
}

图标联动动画

按钮文字与图标的交互效果：

.button span {
  display: inline-block;
  transition: transform 0.3s;
}
.button:hover span {
  transform: translateX(5px);
}

HTML 结构需包含图标元素（如 Font Awesome 或 SVG）。

注意事项：

• 使用 will-change 优化性能（如 will-change: transform）。
• 避免过多动画同时触发，可能影响用户体验。
• 通过 prefers-reduced-motion 媒体查询为禁用动画的用户提供备选方案。