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媒体查询为禁用动画的用户提供备选方案。
