通过CSS transform和transition实现图片缩放动画，鼠标悬停时平滑放大至1.2倍，配合transform-origin调整中心点，结合opacity实现淡入放大效果，并通过固定容器宽高防止布局抖动。
实现图片缩放动画主要通过CSS的 transform 和 transition 属性来完成。你可以让图片在鼠标悬停时平滑放大或缩小，提升页面交互感。
基础缩放动画
使用 transform: scale() 配合 transition 可以轻松实现鼠标悬停放大效果。
示例代码： ```css .zoom-img { transition: transform 0.3s ease; cursor: pointer; }.zoom-img:hover { transform: scale(1.2); }
```html <img src="example.jpg" class="zoom-img" alt="示例图片">
说明：图片默认状态无缩放，鼠标移上时在0.3秒内平滑放大至1.2倍，ease 表示缓动效果。
设置缩放中心点
默认情况下，缩放以元素中心为原点。如需更改，可用 transform-origin 调整。
立即学习“前端免费学习笔记（深入）”；
例如从左上角开始缩放： ```css .zoom-img { transform-origin: top left; transition: transform 0.3s ease; } ```
配合 opacity 实现淡入放大
如果希望图片加载时有渐现加放大的动画，可以结合 opacity 和 transform。
```css .fade-in-zoom { opacity: 0; transform: scale(0.8); transition: all 0.4s ease-out; }.fade-in-zoom.loaded { opacity: 1; transform: scale(1); }
<p>JavaScript 控制类名添加触发动画：</p>
```javascript
window.addEventListener('load', () => {
document.querySelector('.fade-in-zoom').classList.add('loaded');
});防止布局抖动的小技巧
缩放后图片占据空间变化可能引起页面跳动。解决方法：
- 给图片容器设置固定宽高
- 使用 overflow: hidden 裁剪溢出部分
- 或用 will-change: transform 提升性能
基本上就这些。合理使用 transform 和 transition，就能做出自然流畅的图片缩放动画，不复杂但容易忽略细节。
