H5中用SVG模拟指纹扫描光轨动画：通过CSS @keyframes驱动rect上下往复位移，配合opacity变化、feGaussianBlur柔光滤镜及可选JS控制启停，实现科技感视觉效果。
在 H5 页面中用 SVG 模拟指纹识别扫描时的“光轨上下穿梭”动画，核心是用一条水平线（代表扫描光束）沿竖直方向做周期性往复运动，配合透明度/颜色变化和轻微模糊，营造出科技感的扫描效果。不需要真实生物识别能力，纯视觉模拟即可。
1. SVG 结构：定义扫描区域与光轨路径
先创建一个固定宽高的 SVG 容器，内部画一个圆角矩形代表指纹传感器区域，再用一条 <line> 或 <rect> 作为可动画的扫描光轨：
<svg width="300" height="180" viewBox="0 0 300 180"> <!-- 传感器外框（浅灰圆角矩形）--> <rect x="20" y="40" width="260" height="100" rx="12" fill="#f0f0f0" /> <!-- 扫描光轨：一条细长矩形，初始在顶部 --> <rect id="scan-line" x="20" y="40" width="260" height="2" fill="#00c8ff" opacity="0.9" /> </svg>
注意：y 控制光轨垂直位置，动画目标就是让它从 y=40（顶部）平滑移动到 y=138（底部附近），再返回，循环不停。
2. CSS 动画：用 @keyframes 实现上下穿梭
给 #scan-line 添加 CSS 动画，用 transform: translateY() 驱动位移更高效，也方便配合 easing：
@keyframes scanMove {
0% { transform: translateY(0); opacity: 0.9; }
50% { transform: translateY(98px); opacity: 0.6; }
100% { transform: translateY(0); opacity: 0.9; }
}
#scan-line {
animation: scanMove 2.4s ease-in-out infinite;
}说明：
- 98px 是净位移量：传感器内容区高度为 100px，上下留边各 1px，所以光轨需走约 98px 才能覆盖全程；
- ease-in-out 让光轨启动和停止稍缓，中间加速，更接近真实扫描仪节奏；
- opacity 变化 增强动态感——居中时略透明，两端更亮，模拟光束聚焦效果。
3. 进阶优化：添加光晕与呼吸感
仅一条线略单薄，可叠加一个带 feGaussianBlur 的滤镜，让光轨边缘泛出柔光：
<svg>
<defs>
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="1.2" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<rect id="scan-line" filter="url(#glow)" ... />
</svg>同时可加一层极细的 <path> 沿传感器内边缘做缓慢脉动（stroke-dasharray + stroke-dashoffset 动画），模拟待机呼吸灯，强化交互等待感。
4. JS 控制开关（可选）
如需配合识别状态启停动画，用 JS 切换 class 即可：
const line = document.getElementById('scan-line');
// 开始扫描
line.classList.add('scanning');
// 识别成功后暂停
line.classList.remove('scanning');
CSS 中定义：
.scanning { animation-play-state: running; }
#scan-line { animation-play-state: paused; }这样就能在“点击开始”“识别中”“验证成功”等环节精准控制动画节奏。
