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教程(10):CSS3 HSL声明设置颜色
Apr 02 HTML / CSS
一款简洁的纯css3代码实现的动画导航
Oct 31 HTML / CSS
一款纯css3实现的竖形二级导航的实例教程
Dec 11 HTML / CSS
利用CSS3实现单选框动画特效示例代码
Sep 26 HTML / CSS
CSS3 按钮边框动画的实现
Nov 12 HTML / CSS
html5 touch事件实现触屏页面上下滑动(二)
Mar 10 HTML / CSS
HTML5的文档结构和新增标签完全解析
Apr 21 HTML / CSS
基于HTML5 Canvas:字符串,路径,背景,图片的详解
May 09 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
Dec 29 HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 HTML / CSS
奇妙的 CSS shapes(CSS图形)
Apr 05 HTML / CSS
在HTML中引入CSS的几种方式介绍
Dec 06 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
PHP提交表单失败后如何保留已经填写的信息
2014/06/20 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
PHP字符串逆序排列实现方法小结【strrev函数,二分法,循环法,递归法】
2017/01/13 PHP
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
2007/04/20 Javascript
jQuery点缩略图弹出层显示大图片
2015/02/13 Javascript
jquery实现简单文字提示效果
2015/12/02 Javascript
js中实现字符串和数组的相互转化详解
2016/01/24 Javascript
基于Javascript实现倒计时功能
2016/02/22 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
mac下的nodejs环境安装的步骤
2017/05/24 NodeJs
详解Vue.js Mixins 混入使用
2017/09/15 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
2018/01/16 Javascript
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
2018/11/02 Javascript
浅谈JavaScript 声明提升
2020/09/14 Javascript
Python获取远程文件大小的函数代码分享
2014/05/13 Python
Python的Django框架中if标签的相关使用
2015/07/15 Python
Python程序运行原理图文解析
2018/02/10 Python
python实现括号匹配的思路详解
2018/08/23 Python
Python实现二叉树的常见遍历操作总结【7种方法】
2019/03/06 Python
利用python-pypcap抓取带VLAN标签的数据包方法
2019/07/23 Python
Python自动化测试笔试面试题精选
2020/03/12 Python
Python+PyQt5实现灭霸响指功能
2020/05/25 Python
Monnier Freres中文官网:法国领先的奢侈品配饰在线零售商
2017/11/01 全球购物
Mountain Warehouse德国官网:英国户外零售商
2019/08/11 全球购物
上海奥佳笔试题面试题
2016/11/16 面试题
会计主管岗位职责范文
2013/11/08 职场文书
21岁生日感言
2014/02/27 职场文书
中药学专业求职信
2014/05/31 职场文书
物流管理专业推荐信
2014/09/06 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
公积金贷款承诺书
2015/04/30 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技