使用transform: scale()与transition实现图片悬停缩放效果，通过设置transition控制动画时长与缓动函数，hover时改变scale值触发平滑过渡，配合will-change或translateZ(0)优化性能，避免频繁重绘，提升交互体验。
在CSS中实现图片缩放过渡效果，常用 transform: scale() 结合 transition 属性来完成。这种效果常用于图片悬停放大或缩小，提升页面交互体验。
基本语法与原理
scale() 函数用于调整元素的大小，transition 控制变化过程的动画效果。
关键点：
- scale(1) 表示原始大小
- scale(1.2) 表示放大到1.2倍
- transition 设置过渡时间与缓动函数，让缩放更平滑
实现鼠标悬停放大效果
以下是一个常见的图片缩放过渡示例：
立即学习“前端免费学习笔记（深入）”；
.img-container img {
width: 200px;
height: 200px;
object-fit: cover;
transition: transform 0.3s ease;
}
.img-container img:hover {
transform: scale(1.1);
}
说明：
- transition: transform 0.3s ease —— 只对 transform 属性添加 0.3 秒的缓动过渡
- hover 状态下使用 scale(1.1) 实现轻微放大，避免画面突兀
优化细节建议
为了获得更流畅的视觉效果，注意以下几点：
- 设置 will-change: transform 或开启硬件加速：transform: translateZ(0) 可提升动画性能
- 使用 ease-in-out 缓动函数可使开始和结束更自然
- 避免对大尺寸图片频繁缩放，防止重绘性能问题
完整示例代码
可以直接使用的HTML+CSS结构：
@@##@@
基本上就这些，不复杂但容易忽略细节。掌握 scale 和 transition 的配合，能让你的图片交互更生动。
