在css中如何通过transition实现图片放大缩小

使用 transition 结合 transform: scale() 可实现图片平滑缩放，通过 hover 触发；2. 推荐对 transform 应用过渡而非 width/height 以提升性能，注意父容器 overflow 可能导致裁剪问题。

在CSS中，可以通过 transition 结合 transform: scale() 实现图片的平滑放大缩小效果。关键在于定义状态变化时的过渡动画，并设置合适的触发条件（如hover）。

1. 基础HTML结构

<img src="example.jpg" class="zoom-image" alt="示例图片">

2. 使用 transform 和 transition 设置缩放动画

通过设置初始的 transform: scale(1)，并在:hover时改变缩放比例，配合transition实现动画：

小爱开放平台

小米旗下小爱开放平台

23

查看详情

.zoom-image {
  transition: transform 0.3s ease;
  cursor: pointer;
}

.zoom-image:hover {
  transform: scale(1.2);
}

• transition: transform 0.3s ease 表示 transform 属性在变化时，用0.3秒的缓动动画完成
• transform: scale(1.2) 将图片放大到原始尺寸的1.2倍
• 鼠标移出时，会自动恢复原状，同样有动画效果

3. 支持缩小效果（可选）

如果希望默认显示小图，hover时放大，也可以反过来设置：

立即学习“前端免费学习笔记（深入）”；

.zoom-image {
  transform: scale(0.8);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.zoom-image:hover {
  transform: scale(1);
}

4. 注意事项

• 推荐对 transform 属性添加 transition，而不是 width/height，因为 transform 性能更好
• 避免对 opacity 或 visibility 做 transform 过渡，不会生效
• 若父容器有限制溢出（overflow: hidden），注意放大后图片是否被裁剪

以上就是在css中如何通过transition实现图片放大缩小的详细内容，更多请关注php中文网其它相关文章！