缩放动效 · Scale
英文：Scale
动效与交互难度：入门 ★
🗣️一句话大白话
元素从 0.96 左右放大到 1（或反向）入场，或按下时缩小到 0.96。局部聚焦感最强，常用于卡片、弹窗、按钮。scale 要配合 transform-origin 才有正确的缩放中心。卡片 hover 放大 1.02、弹窗从 0.9 放大进入、按钮按下缩到 0.96。给 AI 说"从 0.96 缩放到 1，200ms"比"放大一点"精确得多。注意幅度：放大超 10% 会糊，配合 fade 更柔和。
🖼️样图参考
🎬真实场景
卡片 hover、弹窗、按钮按压、图片预览
📮你可以这样说
「【图像模型版】[卡片] 悬停时平滑放大到 1.02，以中心为原点，200ms；[按钮] 按下缩到 0.96，松开放回。 【HTML/CSS/JS 版】[卡片] hover 用 transform: scale(1.02) + transform-origin: center，200ms ease-out；[按钮] active 时 scale(0.96)。」
通过 AI绘图 工作台生成（模型 API 额度由此消耗）；未配置模型密钥时会提示失败原因。
⚠️边界与常见误解
- ▸误解：scale 只是 transform 一行；还要配 transform-origin 和缓动
- ▸幅度超过 1.1 会糊、显夸张
🚫什么时候别用
- ✗整屏内容整体缩放（会晕），应缩小到单个元素
🧩常见变体
入场放大hover 微放大按压缩小
💡小贴士
- ✦缩放幅度 ≤5% 显精致，≥10% 显夸张
🕸️知识关系图
这个词条与相关术语、AI绘图 知识的连接关系
🔗相关术语
📌素材来源
词条内容参考自 Adrian Punk（X @AdrianPunk115）· WayToAGI 转载 的「《Vibe Coding 网页动效词典（上篇）》」，已按项目「大白话 + 双通道提示词」体例改写与补充。查看原文 ↗