css动画按钮制作
CSS动画按钮制作方法
使用CSS的transition和transform属性创建基础悬停动画效果：
.btn {
background: #3498db;
color: white;
padding: 12px 24px;
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);
}关键帧动画按钮
通过@keyframes实现更复杂的动画序列：
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.pulse-btn {
animation: pulse 2s infinite;
}3D效果按钮
利用CSS 3D变换创造立体感：
.btn-3d {
position: relative;
background: #e74c3c;
box-shadow: 0 5px 0 #c0392b;
transform-style: preserve-3d;
}
.btn-3d:active {
top: 5px;
box-shadow: none;
}渐变颜色动画
结合CSS渐变与动画：
.gradient-btn {
background: linear-gradient(90deg, #ff8a00, #e52e71);
background-size: 200% auto;
transition: background-position 0.5s;
}
.gradient-btn:hover {
background-position: right center;
}加载状态按钮
创建带有加载指示器的按钮：
.loading-btn {
position: relative;
}
.loading-btn::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
border: 2px solid transparent;
border-top-color: white;
border-radius: 50%;
animation: spin 1s linear infinite;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
@keyframes spin {
to { transform: translateY(-50%) rotate(360deg); }
}注意事项
- 考虑添加
prefers-reduced-motion媒体查询为运动敏感用户提供替代方案 - 使用
will-change属性优化性能关键元素的渲染 - 确保动画持续时间适中（建议200-500ms），避免影响用户体验
这些方法可以单独使用或组合使用，根据具体需求调整参数实现不同的视觉效果。
