CSS过渡如何制作图片缩放动画_transform scale与transition组合

使用CSS的transform: scale配合transition可实现图片悬停平滑放大。1. 设置.image-container固定尺寸和overflow:hidden避免布局偏移；2. 为img设置width:100%、height:100%及object-fit:cover确保填充容器，并添加transition:transform 0.3s ease实现过渡动画；3. 在img:hover中定义transform:scale(1.1)触发110%放大效果；4. 可自定义transition时长、缓动函数如cubic-bezier(.25,.8,.25,1)优化动画表现；5. 通过transform-origin调整缩放基点，默认以中心放大，可改为top center等位置。整个过程无需JavaScript，性能优良且易于实现。

想让图片在鼠标悬停时平滑放大，用 CSS 的 transform: scale 搭配 transition 是最简单有效的方法。关键在于设置过渡属性，控制缩放的动画效果。

1. 基础结构：准备图片容器

给图片或其父容器设置基本样式，包括固定尺寸和溢出隐藏（可选），这样缩放时不会影响页面布局。

.image-container {
  width: 300px;
  height: 200px;
  overflow: hidden; /* 隐藏超出部分 */
  border: 2px solid #ddd;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease; /* 核心：添加过渡 */
}

2. 添加悬停缩放效果

使用 :hover 伪类触发 transform: scale()，实现放大。

img:hover {
  transform: scale(1.1); /* 放大到 110% */
}

鼠标移上图片，会以默认中心点平滑放大；移开后自动恢复原样。

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

MarsX

AI驱动快速构建App，低代码无代码开发，改变软件开发的游戏规则

159

查看详情

3. 自定义过渡细节

你可以调整 transition 的参数来改变动画表现：

• 持续时间：如 0.5s 让动画更慢
• 缓动函数：用 ease-in-out 或 cubic-bezier(.25,.8,.25,1) 控制速度变化
• 指定属性：只对 transform 生效，避免其他属性也产生动画

img {
  transition: transform 0.5s cubic-bezier(.25,.8,.25,1);
}

4. 调整缩放中心点（可选）

默认以图片中心缩放，可用 transform-origin 修改锚点：

img {
  transform-origin: top center; /* 从顶部中心开始放大 */
}

基本上就这些。只要掌握 transition 监听 transform 变化，就能做出流畅的图片缩放动画，不依赖 JavaScript，性能也好。

以上就是CSS过渡如何制作图片缩放动画_transform scale与transition组合的详细内容，更多请关注php中文网其它相关文章！