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

代码语言:html

所属分类:动画

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

代码标签: 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='.........完整代码请登录后点击上方下载按钮下载查看

网友评论0