通过 :hover 配合 transform: scale() 和 transition 实现元素平滑放大，设置 transform-origin 控制缩放基点，避免布局抖动，并可自定义动画曲线与持续时间，精准控制过渡效果。
在 CSS 中实现元素 hover 放大动画，主要通过 :hover 伪类配合 transform: scale() 和 transition 属性来完成。这样可以让元素在鼠标悬停时平滑放大，提升交互体验。
1. 基础 hover 放大效果
使用 transform: scale() 放大元素，搭配 transition 实现过渡动画。
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: transform 0.3s ease;
}
.box:hover {
transform: scale(1.2);
}
说明：默认状态下设置过渡动画时间（0.3秒）和缓动效果（ease），悬停时放大 1.2 倍。
2. 防止页面抖动：设置 transform-origin
放大时元素可能“位移”或引起布局跳动。可通过设置 transform-origin 控制缩放基点，通常设为居中。
立即学习“前端免费学习笔记（深入）”；
.box {
transform-origin: center;
}
这样元素会以中心为原点进行缩放，视觉更自然。
3. 自定义动画曲线与持续时间
你可以调整 transition 的缓动函数，让动画更有弹性。
-
ease-in：慢开始 -
ease-out：慢结束 -
cubic-bezier(0.25, 0.8, 0.25, 1)：自定义流畅弹性曲线
.box {
transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
4. 多属性过渡控制
如果你还改变了其他属性（如颜色、边框），但只想对缩放加动画，可以指定只过渡 transform：
transition: transform 0.3s ease;
避免不必要的属性也产生动画。
基本上就这些。一个流畅的 hover 放大动画，关键是 scale + transition + transform-origin 的组合使用，简单有效，兼容性也好。
