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弹性盒模型开发笔记(三)
Apr 26 HTML / CSS
css3+伪元素实现鼠标移入时下划线向两边展开的效果
Apr 25 HTML / CSS
CSS3 文字动画效果
Nov 12 HTML / CSS
Html5 postMessage实现跨域消息传递
Mar 11 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
Jan 14 HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
May 12 HTML / CSS
HTML5 canvas基本绘图之文字渲染
Jun 27 HTML / CSS
有关HTML5中背景音乐的自动播放功能
Oct 16 HTML / CSS
使用html2canvas.js实现页面截图并显示或上传的示例代码
Dec 18 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
Nov 26 HTML / CSS
HTML+CSS制作心跳特效的实现
May 26 HTML / CSS
css清除浮动clearfix:after的用法详解(附完整代码)
May 21 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
实现了一个PHP5的getter/setter基类的代码
2007/02/25 PHP
JavaScript 脚本将当地时间转换成其它时区
2009/03/19 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
2009/11/24 Javascript
JavaScript面向对象(极简主义法minimalist approach)
2012/07/17 Javascript
12种不宜使用的Javascript语法整理
2013/11/04 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
jQuery实用技巧必备(上)
2015/11/02 Javascript
jquery实现触发时更新下拉列表内容的方法
2015/12/02 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
理解JavaScript原型链
2016/10/25 Javascript
Nodejs中使用phantom将html转为pdf或图片格式的方法
2017/09/18 NodeJs
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
2018/06/13 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
浅谈js数组splice删除某个元素爬坑
2020/10/14 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
[00:12]2018DOTA2亚洲邀请赛 sylar表现SOLO技艺
2018/04/06 DOTA
linux环境下安装pyramid和新建项目的步骤
2013/11/27 Python
使用graphics.py实现2048小游戏
2015/03/10 Python
python中的全局变量用法分析
2015/06/09 Python
Python中对元组和列表按条件进行排序的方法示例
2015/11/10 Python
apache部署python程序出现503错误的解决方法
2017/07/24 Python
Python实现获取照片拍摄日期并重命名的方法
2017/09/30 Python
Python实现嵌套列表及字典并按某一元素去重复功能示例
2017/11/30 Python
Python基于csv模块实现读取与写入csv数据的方法
2018/01/18 Python
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
python+pyqt5实现图片批量缩放工具
2019/03/18 Python
Python 迭代,for...in遍历,迭代原理与应用示例
2019/10/12 Python
Python利用matplotlib绘制约数个数统计图示例
2019/11/26 Python
Pycharm连接远程服务器过程图解
2020/04/30 Python
Python文件操作模拟用户登陆代码实例
2020/06/09 Python
Python实时监控网站浏览记录实现过程详解
2020/07/14 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
大学生自我评价200字(4篇)
2014/09/17 职场文书
Java 在生活中的 10 大应用
2021/11/02 Java/Android