使用 transition 结合 transform: scale() 可实现图片平滑缩放，通过 hover 触发；2. 推荐对 transform 应用过渡而非 width/height 以提升性能，注意父容器 overflow 可能导致裁剪问题。
在CSS中，可以通过 transition 结合 transform: scale() 实现图片的平滑放大缩小效果。关键在于定义状态变化时的过渡动画，并设置合适的触发条件（如hover）。
1. 基础HTML结构
假设有一个图片元素：
2. 使用 transform 和 transition 设置缩放动画
通过设置初始的 transform: scale(1)，并在:hover时改变缩放比例，配合transition实现动画：
九歌
九歌–人工智能诗歌写作系统
322 查看详情 
样式代码如下：
.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);
}
这里使用了 cubic-bezier 自定义缓动函数，让缩小放大更有弹性感。
4. 注意事项
推荐对 transform 属性添加 transition，而不是 width/height，因为 transform 性能更好 避免对 opacity 或 visibility 做 transform 过渡，不会生效 若父容器有限制溢出（overflow: hidden），注意放大后图片是否被裁剪基本上就这些，不复杂但容易忽略细节。
以上就是在css中如何通过transition实现图片放大缩小的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1032669.html
微信扫一扫 
支付宝扫一扫 
