通过CSS的transform: scale和@keyframes可实现按钮悬停时的放大缩小动画。1. 使用transform: scale结合:hover与transition实现平滑缩放；2. 利用@keyframes定义复杂动画如脉冲效果；3. 将动画绑定到:hover以控制触发时机；4. 优化性能建议使用will-change并避免滥用无限动画，提升交互体验。
想让按钮在鼠标悬停时有放大或缩小的动画效果，可以通过CSS的 transform: scale 结合 @keyframes 和 animation 来实现。这种方式不仅流畅，还能自定义动画过程。
1. 使用 transform: scale 实现基础缩放
scale() 函数可以放大或缩小元素。值大于1表示放大，小于1表示缩小。
例如：-
transform: scale(1.2);表示放大到原始尺寸的1.2倍 -
transform: scale(0.8);表示缩小到80%
配合 :hover 可以快速做出悬停放大效果，加上 transition 让变化更平滑。
示例代码：
立即学习“前端免费学习笔记（深入）”；
button {
padding: 10px 20px;
font-size: 16px;
border: none;
background-color: #007bff;
color: white;
cursor: pointer;
transition: transform 0.3s ease;
}
button:hover {
transform: scale(1.1);
}
2. 使用 @keyframes 制作自定义缩放动画
如果需要更复杂的动画（比如先缩小再放大，或反复缩放），可以用 @keyframes 定义关键帧。
示例：创建一个脉冲式缩放动画
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
button.animated {
animation: pulse 1.5s infinite;
}
这个动画会让按钮持续地放大再恢复，适合用于提示用户点击的场景。
3. 控制动画触发时机
通常我们不希望动画一直播放，而是通过交互（如悬停）来触发。
可以把动画设置为只在 hover 时运行：
button {
padding: 10px 20px;
background-color: #28a745;
color: white;
border: none;
cursor: pointer;
}
button:hover {
animation: pulse 0.6s ease forwards;
}
@keyframes pulse {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
这样，当鼠标移到按钮上时，才会播放一次放大动画，并停留在放大状态（forwards 的作用）。
4. 注意事项和优化建议
- 使用 transform 不会触发页面重排，性能更好
- 添加 will-change: transform; 可提升动画流畅度（但不要滥用）
- 避免无限动画干扰用户体验，尤其在静态界面中
- 可结合 opacity 或其他属性一起动画，增强视觉效果
基本上就这些。用好 scale 和 keyframes，能让按钮交互更有活力又不失简洁。
