模糊显现 · Blur Reveal
英文：Blur Reveal
动效与交互难度：入门 ★
🗣️一句话大白话
元素从模糊到清晰出现。比淡入多一层"对焦"感，适合 Hero 大标题、首屏主视觉，营造从虚到实的仪式感。实现是 filter: blur(8px) → blur(0) 配合 opacity。模糊显现慢一点更高级（600-800ms），且只适合"少而大"的元素——小字模糊过程会糊到看不清。AI 默认不会主动加模糊，要主动说才有。
🖼️样图参考
🎬真实场景
Hero 标题、首屏主视觉、品牌开场、大图入场
📮你可以这样说
「【图像模型版】让 [主标题] 从模糊渐变为清晰：模糊 12px→0，同时淡入，时长 700ms，先快后慢，营造对焦感。 【HTML/CSS/JS 版】[标题] 用 filter: blur(12px)→0 + opacity 0→1，700ms ease-out。」
通过 AI绘图 工作台生成（模型 API 额度由此消耗）；未配置模型密钥时会提示失败原因。
⚠️边界与常见误解
- ▸误解：blur-reveal 只是加模糊滤镜；实际是"模糊→清晰"的入场过程
- ▸小字号正文用会看不清过程
🚫什么时候别用
- ✗小字号正文
- ✗高频更新的列表
- ✗需要快速可读的内容
🧩常见变体
模糊+淡入模糊+放大逐字模糊清晰
💡小贴士
- ✦只给大字/大图用，blur 8-16px 起步
🕸️知识关系图
这个词条与相关术语、AI绘图 知识的连接关系
🔗相关术语
📌素材来源
词条内容参考自 Adrian Punk（X @AdrianPunk115）· WayToAGI 转载 的「《Vibe Coding 网页动效词典（上篇）》」，已按项目「大白话 + 双通道提示词」体例改写与补充。查看原文 ↗