<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>HTML SVG指纹扫描动画特效 www.bootstrapmb.com</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<svg class="fingerprint" viewBox="0 0 100 100">
<linearGradient id="scan" gradientTransform="rotate(90)">
<stop offset="0%" stop-color="rgba(0, 250, 255, 0)" />
<stop offset="40%" stop-color="rgba(0, 250, 255, 0.3)" />
<stop offset="49%" stop-color="rgba(0, 250, 255, 0.7)" />
<stop offset="50%" stop-color="rgba(0, 250, 255, 1)" />
<stop offset="51%" stop-color="rgba(0, 250, 255, 0.7)" />
<stop offset="60%" stop-color="rgba(0, 250, 255, 0.3)" />
<stop offset="100%" stop-color="rgba(0, 250, 255, 0)" />
</linearGradient>
<g class="creases" fill="none" stroke="#0df" stroke-width="3.3" stroke-linecap="round">
<path d="M 50 50 Q 50 73.4 20.3 84.2">
<animate attributeName="stroke-dasharray" values="0; 54; 0" dur="6s" repeatCount="indefinite" begin="-1.1s" />
</path>
<path d="M 26.6 88.7 Q 58.1 76.1 58.1 50 C 58.1 43.7 50.9 41 47.3 42.8 C 40.1 46.4 43.7 50 41 59 Q 36.5 73.4 14.9 78.8">
<animate attributeName="stroke-dasharray" values="0; 134.77; 0" dur="6s" repeatCount="indefinite" begin="-5.57s" />
</path>
<path d="M 33.8 92.3 Q 66.2 78.8 66.2 50 C 66.2 37.4 55.4 34.7 50 34.7 C 33.8 34.7 35.6 49.1 33.8 57.2 Q 31.1 69.8 10.4 72.5">
<animate attributeName="stroke-dasharray" values="0; 159.42; 0" dur="6s" repeatCount="indefinite" begin="-3.22s" />
</path>
<path d="M 50 93.2 Q 72.5 81.5 75.2 50 C 76.1 32.9 60.8 26.6 50 26.6 C 25.7 26.6 28.4 45.5 26.6 54.5 Q 24.8 65.3 7.7 65.3">
<animate attributeName="stroke-dasharray" values="0; 174.55; 0" dur="6s" repeatCount="indefinite" begin="-1.54s" />
</path>
<path d="M 68 88.7 Q 82.4 72.5 83.3 50 C 84.2 29.3 68.9 17.6 50 17.6 C 19.4 17.6 20.3 41.9 18.5 50.9 Q 17.6 57.2 6.8 58.1">
<animate attributeName="stroke-dasharray" values="0; 180.14; 0" dur="6s" repeatCount="indefinite" begin="0s" />
</path>
<path d="M 86.9 71.6 Q 90.5 64.4 91.4 50 C 93.2 2.3 20.3 -8.5 12.2 38.3 Q 11.3 43.7 10.4 47.3">
<animate attributeName="stroke-dasharray" values="0; 166.88; 0" dur="6s" repeatCount="indefinite" begin="-4.67s" />
</path>
</g>
<path d="M 50 0 H 100 V 100 H 0 V 0 H 50" fill="none" stroke="#0df" stroke-width="3" stroke-dasharray="0 25 50 25"/>
<rect x="0.5" y="0" height="100" width="99" fill="url(#scan)">
<animate attributeName="y" values="-50; 50; -50" dur="6s" repeatCount="indefinite" begin="0s" />
</rect>
</svg>
<!-- partial -->
</body>
</html>
HTMLSVG指纹扫描动画特效.zip
需积分: 1 45 浏览量
2023-11-17
16:24:23
上传
评论
收藏 2KB ZIP 举报
D6元素
- 粉丝: 5
- 资源: 203