使用CSS的:hover伪类结合transform和transition属性，可实现图片悬停时的放大、旋转、移动或透明度变化等动画效果。1. HTML中为img标签添加class；2. CSS设置transition定义动画过渡，如transform: scale(1.1)实现放大；3. 可扩展rotate、translateY或opacity等属性实现多样效果；4. 通过display: block、overflow: hidden和will-change: transform优化表现。合理运用可提升交互体验，避免过度动画。
想让网页中的图片在鼠标悬停时产生动画效果，可以通过 HTML 和 CSS 配合实现。核心思路是使用 CSS 的 :hover 伪类选择器，结合过渡（transition）或变换（transform）属性，让图片在用户交互时平滑地变化。
1. 基础结构：HTML 图片标签
首先，在 HTML 中插入一张图片：
<img src="example.jpg" alt="示例图片" class="hover-img">为图片添加 class，便于后续用 CSS 控制样式。
2. 添加悬停放大效果
最常见的动画是鼠标悬停时图片轻微放大。使用 CSS 的 transform 和 transition 属性即可实现：
立即学习“前端免费学习笔记（深入）”；
transition: transform 0.3s ease;
}
.hover-img:hover {
transform: scale(1.1);
}
说明：
- transition 定义变化的动画效果，0.3s 表示动画持续时间，ease 表示缓动效果
- scale(1.1) 表示放大为原尺寸的 1.1 倍
- 鼠标移开后，图片会自动恢复原状
3. 其他常见悬停动画效果
除了放大，还可以实现旋转、移动、透明度变化等效果：
- 旋转：.hover-img:hover { transform: rotate(10deg); }
- 上下移动：.hover-img:hover { transform: translateY(-5px); }
- 变暗/半透明：.hover-img:hover { opacity: 0.8; }
- 组合效果：.hover-img:hover { transform: scale(1.1) rotate(5deg); }
4. 提升体验的小技巧
为了让动画更自然，可以注意以下几点：
- 给图片设置 display: block 或 overflow: hidden 避免布局抖动
- 使用 will-change: transform 提升动画性能
- 避免过度动画，保持用户体验流畅
基本上就这些。通过简单的 CSS 就能让图片“活”起来，增强网页的互动感。不复杂但容易忽略细节。
