纯CSS无法绘制真实指纹纹路，只能用SVG、Canvas或图片资源实现，CSS仅负责定位、遮罩和动画；推荐用内联SVG data URL配合background-size、background-position: 50% 50%及伪元素光带动画模拟扫描效果。
纯 CSS 无法“绘制”真实指纹纹路，只能用视觉技巧模拟轮廓或扫描动效；真指纹图案必须用 SVG、Canvas 或图片资源，CSS 只负责定位、遮罩和动画。
用 background-image + SVG data URL 模拟指纹图案
直接在 CSS 中嵌入简化的指纹 SVG 路径，避免额外 HTTP 请求，也规避跨域问题。关键不是画得多像，而是保持清晰可缩放、无锯齿。
-
background-image值用url("data:image/svg+xml;utf8,...")内联 SVG，注意对<、>、"做 URI 编码（或改用单引号包裹属性） - SVG
<path>尽量控制在 10 条以内，避免路径过密导致渲染卡顿或模糊 - 务必声明
background-size: contain或固定像素值（如120px 160px），否则在高 DPR 屏幕下会失真 - 别依赖
background-position: center做居中——它在容器尺寸变化时会漂移，改用background-position: 50% 50%更稳定
用伪元素 + 渐变模拟扫描光带效果
所谓“扫描动画”，本质是移动一个半透明光条遮罩在指纹图层上。核心难点不是动起来，而是动得准、不抖、不漏边。
- 光带通常用
.fingerprint::before实现，background: linear-gradient(...)配合background-size: 100% 8px控制高度 - 动画必须用
background-position（Y 轴位移），不能用transform: translateY()——后者会触发重绘，且在 scale 动画下错位 - 起始/结束位置建议用固定像素值（如
0 40px→0 180px），而非百分比，否则在不同设备上扫描范围不一致 - 加
will-change: background-position可提升动画帧率，但仅在必要时启用（避免过度触发合成层）
为什么不用 border-radius 或 box-shadow 伪造指纹？
因为它们生成的是规则几何形，而指纹特征是大量不规则、非对称、有分叉与终结点的曲线结构。强行用 CSS 形状拼接，结果要么像蜗牛壳，要么像乱码波浪线，且无法响应式适配。
立即学习“前端免费学习笔记（深入）”；
-
border-radius: 50%只能出圆，clip-path: polygon()手动描点极易错位，维护成本极高 -
box-shadow多层叠加虽能造出“浮雕感”，但缺乏方向性细节（如脊线走向、 minutiae 点），识别度为零 - 真正需要指纹语义（比如用于生物认证 UI）时，必须用 SVG 路径或 Canvas 绘制——CSS 只做容器与动效
最易被忽略的一点：所有基于 background-image 的指纹图，若未设置 background-repeat: no-repeat，在某些安卓 WebView 或旧版 Safari 下会意外平铺；加上这行，比调十次动画 timing-function 都管用。
