纯CSS可实现“解开密码”视觉效果但无逻辑解密功能，常用clip-path遮罩滑开、filter模糊渐显或逐字显示等过渡动画，需避免对display/visibility做transition，关键属性应选opacity、transform、filter等。
用 :hover + transition 模拟“解开密码”的视觉效果
纯 CSS 做不出真正“解开密码”的逻辑（比如解密、校验），但能做出鼠标移入后，字符逐个显现、遮罩滑开、或文字从模糊变清晰这类视觉“解开感”。核心是控制元素的可见性、透明度、位移或滤镜，并用 transition 加上缓动。
常见错误是直接对 display: none 做过渡——它不触发动画；或者用 visibility: hidden 却忘了设初始 opacity: 0，导致“闪现”。
- 只对可动画属性做
transition：比如opacity、transform、filter、width、height - 避免用
display、visibility（除非配合opacity和pointer-events） - 若想“逐字”效果，得把每个字符包进独立
<span>，再用animation-delay错开
clip-path 遮罩 + transition 实现“滑开式解开”
这是最接近“密码被揭开”直觉的做法：初始用多边形遮罩盖住文字，移入时遮罩收缩，露出内容。比 opacity 更有“物理揭开”感。
注意 Safari 对 clip-path 的 inset() 支持较好，但 polygon() 动画需写完整路径，且必须用 transition 而非 animation 才能响应 hover。
立即学习“前端免费学习笔记（深入）”；
- 初始状态：
clip-path: inset(0 0 0 0)（完全不遮）→ 改为inset(0 0 100% 0)（遮住下半部）或inset(0 100% 0 0)（遮住右边） - 过渡写法：
transition: clip-path 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)（用非标准贝塞尔让“拉开”更有力） - 别用
clip-path: circle()做过渡——多数浏览器不支持圆半径的 transition
用 filter: blur() + opacity 模拟“密码逐渐清晰”
适合表现“密码正在被识别/解码”的科技感。原理很简单：初始高斯模糊 + 低透明度，hover 时 blur 值归零、opacity 归一。
容易踩的坑是模糊值太大（如 blur(20px)）导致文字边缘严重失真，hover 后又太“硬”，缺乏过渡层次。
- 推荐起始值：
filter: blur(8px)+opacity: 0.7 - 结束值：
filter: blur(0)+opacity: 1 - 必须同时过渡两个属性：
transition: filter 0.5s, opacity 0.5s，否则会错拍 - Firefox 对
filter过渡性能较弱，复杂页面慎用
为什么不用 JavaScript？什么情况下必须切过去
CSS 方案本质是“视觉欺骗”，所有状态都得预先写死。一旦需求变成“输入正确密码才解开”“解开后触发 API 请求”“解开动画依赖用户输入长度”，CSS 就无能为力了。
这时得用 JS 控制类名切换，但动画部分仍建议保留 CSS 过渡——JS 只负责 element.classList.add('unlocked')，样式规则在 CSS 里定义。
- 需要判断条件逻辑（比如密码是否匹配）→ 必须 JS
- 要监听输入实时变化（如每输一位，解开一个字符）→ 必须 JS 绑定
input事件 - 要兼容 IE11 或老安卓 WebView →
clip-path和filter都得降级为transform: translateY()模拟
真正难的不是怎么动，而是动的时候不让用户觉得“卡”或者“假”。比如遮罩滑开速度和鼠标进入速度不匹配，就会像在拖拽一个粘滞图层——这种细节，只有在真实鼠标轨迹下反复调 0.05s 才能压准。
