svg+css实现指纹扫描动画效果代码-html代码-BFW代码库

svg+css实现指纹扫描动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+css实现指纹扫描动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <style>
        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; -5.........完整代码请登录后点击上方下载按钮下载查看