CSS3实现指纹特效代码


Posted in HTML / CSS onMarch 17, 2022

具体代码如下所示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
				font-family: "calisto mt";
			}
			body{
				display: flex;
				justify-content: center;
				align-items: center;
				min-height: 100vh;
				background: #111;
			}
			.scan{
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			.scan  .fingerprint{
				position: relative;
				width: 200px;
				height: 280px;
				background: url(img/finger0.png) no-repeat;
				background-size: 100%;
				
			}
			.scan  .fingerprint::before{
				content: '';
				position: absolute;
                top:0;
				left: 0;
				height: 100%;
				width: 100%;
				background: url(img/finger2.png) no-repeat;
				background-size:  100%;
				animation:  animate  4s  ease-in-out  infinite;
			}
			.scan  .fingerprint::after{
				content: '';
				position: absolute;
			    top:0;
				left: 0;
				height: 8px;
				width: 100%;
				margin-top: -30px;
				background:  #3fefef;
				border-radius: 8px;
				filter: drop-shadow(0 0 20px #3fefef) drop-shadow(0 0 60px #3fefef);
				animation:  animate_line  4s  ease-in-out  infinite;
			}
			@keyframes animate_line{
				0%,100%{
					top: 0;
				}
				50%{
					top: 100%;
				}
			}
			@keyframes animate{
				0%,100%{
					opacity: 0;
				}
				50%{
					opacity: 1;
				}
			}
			.scan  h3{
				text-transform: unset;
				font-size: 2em;
				letter-spacing: 2px;
				margin-top: 20px;
				color: #3FEFEF;
				filter: drop-shadow(0 0 20px #3fefef) drop-shadow(0 0 60px #3fefef);
				animation:  animate_txt  4s  ease-in-out  infinite;
			}
			@keyframes animate_txt{
				0%,100%{
					opacity: 0;
				}
				50%{
					opacity: 1;
				}
			}
		</style>
	</head>
	<body>
		<div class="scan">
			<div class="fingerprint"></div>
			<h3>Scanning...</h3>
		</div>
	</body>
</html>

效果图:

CSS3实现指纹特效代码
CSS3实现指纹特效代码

到此这篇关于CSS3实现指纹特效的文章就介绍到这了,更多相关css3指纹特效内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3制作日历实现代码
Jan 21 HTML / CSS
HTML5如何实现元素拖拽
Mar 11 HTML / CSS
canvas粒子动画背景的实现示例
Sep 03 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
Feb 06 HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
Jul 20 HTML / CSS
基于IE10/HTML5 开发
Apr 22 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
Apr 23 HTML / CSS
使用canvas绘制超炫时钟
Dec 17 HTML / CSS
深入探究HTML5的History API
Jul 09 HTML / CSS
H5 meta小结(前端必看篇)
Aug 24 HTML / CSS
Html5定位终极解决方案
Feb 05 HTML / CSS
html+css 实现简易导航栏功能
Apr 07 HTML / CSS
css3应用示例:新增的选择器
Mar 16 #HTML / CSS
css布局巧妙技巧之css三角示例的运用
Mar 16 #HTML / CSS
css3新特性的应用示例分析
Mar 16 #HTML / CSS
CSS font-variation 可变字体的魅力(实例详解)
HTML中的表单元素介绍
HTML中的表格元素介绍
HTML基本元素标签介绍
You might like
提问的智慧(2)
2006/10/09 PHP
php 文件上传代码(限制jpg文件)
2010/01/05 PHP
PHP计算2点经纬度之间的距离代码
2013/08/12 PHP
php+js iframe实现上传头像界面无跳转
2014/04/29 PHP
浅析PHP7的多进程及实例源码
2019/04/14 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
简单JS代码压缩器
2006/10/12 Javascript
全面理解面向对象的 JavaScript(来自ibm)
2013/11/10 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
js获取字符串字节数方法小结
2015/06/09 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
js获取 gif 的帧数的代码实例
2019/09/10 Javascript
详解react组件通讯方式(多种)
2020/05/06 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
2020/05/19 Javascript
python实现忽略大小写对字符串列表排序的方法
2014/09/25 Python
python二维列表一维列表的互相转换实例
2018/07/02 Python
详解python中的Turtle函数库
2018/11/19 Python
Python3.5运算符操作实例详解
2019/04/25 Python
pandas如何处理缺失值
2019/07/31 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
python实现遍历文件夹图片并重命名
2020/03/23 Python
详解Python中namedtuple的使用
2020/04/27 Python
python使用yaml 管理selenium元素的示例
2020/12/01 Python
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
历史学专业大学生找工作的自我评价
2013/10/16 职场文书
晚归检讨书
2014/02/19 职场文书
《月光启蒙》教学反思
2014/03/01 职场文书
《冬阳童年骆驼队》教学反思
2014/04/15 职场文书
2016年大学生社区服务活动总结
2016/04/06 职场文书
HTML+VUE分页实现炫酷物联网大屏功能
2021/05/27 Vue.js
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers
Spring Security使用单点登录的权限功能
2022/04/03 Java/Android