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中利用animation属性创建雪花飘落特效
May 14 HTML / CSS
用CSS3绘制三角形的简单方法
Jul 17 HTML / CSS
总结30个CSS3选择器
Apr 13 HTML / CSS
详解利用css3的var()实现运行时改变scss的变量值
Mar 02 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
Oct 08 HTML / CSS
20佳惊艳的HTML5应用程序示例分享
May 03 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
Apr 25 HTML / CSS
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
Jul 04 HTML / CSS
在HTML5中使用MathML数学公式的简单讲解
Feb 19 HTML / CSS
详解canvas绘制网络字体几种方法
Aug 27 HTML / CSS
纯CSS实现一个简单步骤条的示例代码
Jul 15 HTML / CSS
CSS实现鼠标悬浮动画特效
May 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
德生PL990的分析评价
2021/03/02 无线电
编写PHP的安全策略
2006/10/09 PHP
PHP 数据库树的遍历方法
2009/02/06 PHP
提高PHP性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
php+Ajax处理xml与json格式数据的方法示例
2019/03/04 PHP
Extjs4 类的定义和扩展实例
2013/06/28 Javascript
JS和Jquery获取和修改label的值的示例代码
2014/01/15 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
[js高手之路]寄生组合式继承的优势详解
2017/08/28 Javascript
vue-router 路由基础的详解
2017/10/17 Javascript
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
2019/11/07 jQuery
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
[01:32]2014DOTA2西雅图邀请赛 CIS我们有信心进入正赛
2014/07/08 DOTA
Python实现高效求解素数代码实例
2015/06/30 Python
Python学生成绩管理系统简洁版
2020/04/05 Python
python的socket编程入门
2018/01/29 Python
python使用python-pptx删除ppt某页实例
2020/02/14 Python
python 实现线程之间的通信示例
2020/02/14 Python
一文轻松掌握python语言命名规范规则
2020/06/18 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
使用CSS3来实现滚动视差效果的教程
2015/08/24 HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
Pop In A Box英国:Funko POP搪胶公仔
2019/05/27 全球购物
企业员工培训感言
2014/02/26 职场文书
大学班级学风建设方案
2014/05/01 职场文书
村干部培训方案
2014/05/02 职场文书
教师求职信
2014/06/17 职场文书
三严三实学习心得体会
2014/10/13 职场文书
大学军训决心书
2015/02/05 职场文书
店长岗位职责
2015/02/11 职场文书
小学体育组工作总结2015
2015/07/21 职场文书
感恩教师节主题班会
2015/08/12 职场文书
为Centos安装指定版本的Docker
2022/04/01 Servers