17370845950

通过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
@@##@@

说明：图片默认状态无缩放，鼠标移上时在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); }

JavaScript 控制类名添加触发动画：
```javascript
window.addEventListener('load', () => {
  document.querySelector('.fade-in-zoom').classList.add('loaded');
});

防止布局抖动的小技巧

缩放后图片占据空间变化可能引起页面跳动。解决方法：

• 给图片容器设置固定宽高
• 使用 overflow: hidden 裁剪溢出部分
• 或用 will-change: transform 提升性能

基本上就这些。合理使用 transform 和 transition，就能做出自然流畅的图片缩放动画，不复杂但容易忽略细节。