夜雨聆风
HTMLSVG指纹扫描动画特效!!附源码!!
效果展示
完整源码
<!DOCTYPE html><htmllang="en" ><head><metacharset="UTF-8"><title>HTML SVG指纹扫描动画特效 www.bootstrapmb.com</title><linkrel="stylesheet"href="./style.css"></head><body><!-- partial:index.partial.html --><svgclass="fingerprint"viewBox="0 0 100 100"><linearGradientid="scan"gradientTransform="rotate(90)"><stopoffset="0%"stop-color="rgba(0, 250, 255, 0)" /><stopoffset="40%"stop-color="rgba(0, 250, 255, 0.3)" /><stopoffset="49%"stop-color="rgba(0, 250, 255, 0.7)" /><stopoffset="50%"stop-color="rgba(0, 250, 255, 1)" /><stopoffset="51%"stop-color="rgba(0, 250, 255, 0.7)" /><stopoffset="60%"stop-color="rgba(0, 250, 255, 0.3)" /><stopoffset="100%"stop-color="rgba(0, 250, 255, 0)" /></linearGradient><gclass="creases"fill="none"stroke="#0df"stroke-width="3.3"stroke-linecap="round"><pathd="M 50 50 Q 50 73.4 20.3 84.2"><animateattributeName="stroke-dasharray"values="0; 54; 0"dur="6s"repeatCount="indefinite"begin="-1.1s" /></path><pathd="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"><animateattributeName="stroke-dasharray"values="0; 134.77; 0"dur="6s"repeatCount="indefinite"begin="-5.57s" /></path><pathd="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"><animateattributeName="stroke-dasharray"values="0; 159.42; 0"dur="6s"repeatCount="indefinite"begin="-3.22s" /></path><pathd="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"><animateattributeName="stroke-dasharray"values="0; 174.55; 0"dur="6s"repeatCount="indefinite"begin="-1.54s" /></path><pathd="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"><animateattributeName="stroke-dasharray"values="0; 180.14; 0"dur="6s"repeatCount="indefinite"begin="0s" /></path><pathd="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"><animateattributeName="stroke-dasharray"values="0; 166.88; 0"dur="6s"repeatCount="indefinite"begin="-4.67s" /></path></g><pathd="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"/><rectx="0.5"y="0"height="100"width="99"fill="url(#scan)"><animateattributeName="y"values="-50; 50; -50"dur="6s"repeatCount="indefinite"begin="0s" /></rect></svg><!-- partial --></body></html>
body{background:#012;}.fingerprint {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-height:300x;max-width:300px;}/* this can be used on a div with this class */.fingerprintClass{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='fingerprint' viewBox='0 0 100 100'%3E%3ClinearGradient id='scan' gradientTransform='rotate(90)'%3E%3Cstop offset='0%25' stop-color='rgba(0, 250, 255, 0)' /%3E%3Cstop offset='40%25' stop-color='rgba(0, 250, 255, 0.3)' /%3E%3Cstop offset='49%25' stop-color='rgba(0, 250, 255, 0.7)' /%3E%3Cstop offset='50%25' stop-color='rgba(0, 250, 255, 1)' /%3E%3Cstop offset='51%25' stop-color='rgba(0, 250, 255, 0.7)' /%3E%3Cstop offset='60%25' stop-color='rgba(0, 250, 255, 0.3)' /%3E%3Cstop offset='100%25' stop-color='rgba(0, 250, 255, 0)' /%3E%3C/linearGradient%3E%3Cg class='creases' fill='none' stroke='%230df' stroke-width='3.3' stroke-linecap='round'%3E%3Cpath d='M 50 50 Q 50 73.4 20.3 84.2'%3E%3Canimate attributeName='stroke-dasharray' values='0; 54; 0' dur='6s' repeatCount='indefinite' begin='-1.1s' /%3E%3C/path%3E%3Cpath 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'%3E%3Canimate attributeName='stroke-dasharray' values='0; 134.77; 0' dur='6s' repeatCount='indefinite' begin='-5.57s' /%3E%3C/path%3E%3Cpath 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'%3E%3Canimate attributeName='stroke-dasharray' values='0; 159.42; 0' dur='6s' repeatCount='indefinite' begin='-3.22s' /%3E%3C/path%3E%3Cpath 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'%3E%3Canimate attributeName='stroke-dasharray' values='0; 174.55; 0' dur='6s' repeatCount='indefinite' begin='-1.54s' /%3E%3C/path%3E%3Cpath 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'%3E%3Canimate attributeName='stroke-dasharray' values='0; 180.14; 0' dur='6s' repeatCount='indefinite' begin='0s' /%3E%3C/path%3E%3Cpath 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'%3E%3Canimate attributeName='stroke-dasharray' values='0; 166.88; 0' dur='6s' repeatCount='indefinite' begin='-4.67s' /%3E%3C/path%3E%3C/g%3E%3Cpath d='M 50 0 H 100 V 100 H 0 V 0 H 50' fill='none' stroke='%230df' stroke-width='3' stroke-dasharray='0 25 50 25'/%3E%3Crect x='0.5' y='0' height='100' width='99' fill='url(%23scan)'%3E%3Canimate attributeName='y' values='-50; 50; -50' dur='6s' repeatCount='indefinite' begin='0s' /%3E%3C/rect%3E%3C/svg%3E");height:50px;width:50px;}