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属性box-shadow使用详细教程
Jan 21 HTML / CSS
CSS3的Flexbox布局的简明入门指南
Apr 08 HTML / CSS
分享CSS3制作卡片式图片的方法
Jul 08 HTML / CSS
10分钟理解CSS3 Grid布局
Dec 20 HTML / CSS
CSS3实现缺角矩形,折角矩形以及缺角边框
Dec 20 HTML / CSS
HTML5地理定位实例
Oct 15 HTML / CSS
详解HTML5 data-* 自定义属性
Jan 24 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
Aug 27 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
Apr 14 HTML / CSS
canvas绘制太极图的实现示例
Apr 29 HTML / CSS
Canvas波浪花环的示例代码
Aug 21 HTML / CSS
css height属性中的calc方法详解
Jun 03 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实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
PHP实现二维数组按照指定的字段进行排序算法示例
2019/04/23 PHP
flash javascript之间的通讯方法小结
2008/12/20 Javascript
javascript解决innerText浏览器兼容问题思路代码
2013/05/17 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
String字符串截取的四种方式总结
2016/11/28 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
2016/12/02 Javascript
ajax分页效果(bootstrap模态框)
2017/01/23 Javascript
thinkjs 文件上传功能实例代码
2017/11/08 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
2018/03/02 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
JS实现的类似微信聊天效果示例
2019/01/29 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
小程序点击图片实现png转jpg
2019/10/22 Javascript
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
Tensorflow分类器项目自定义数据读入的实现
2019/02/05 Python
使用Python将Mysql的查询数据导出到文件的方法
2019/02/25 Python
Python之NumPy(axis=0 与axis=1)区分详解
2019/05/27 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
python2与python3爬虫中get与post对比解析
2019/09/18 Python
在vscode中配置python环境过程解析
2019/09/28 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
PyTorch中Tensor的数据类型和运算的使用
2020/09/03 Python
详解Python爬虫爬取博客园问题列表所有的问题
2021/01/18 Python
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
服装设计专业求职信
2014/06/16 职场文书
学生违纪检讨书200字
2014/10/21 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
党支部综合考察意见
2015/06/01 职场文书
办公室卫生管理制度
2015/08/04 职场文书
企业安全生产规章制度
2015/08/06 职场文书
pdf论文中python画的图Type 3 fonts字体不兼容的解决方案
2021/04/24 Python
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS