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 相关文章推荐
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
Apr 03 HTML / CSS
CSS3 Columns分列式布局方法简介
May 03 HTML / CSS
6种非常炫酷的CSS3按钮边框动画特效
Mar 16 HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 HTML / CSS
5分钟弄清楚html5的drag and drop(小结)
Apr 10 HTML / CSS
HTML5 新事件 小结
Jul 16 HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
Dec 09 HTML / CSS
html5的新玩法——语音搜索
Jan 03 HTML / CSS
html5版canvas自由拼图实例
Oct 15 HTML / CSS
html5绘制时钟动画
Dec 15 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
Apr 24 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
Mar 25 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中instanceof关键字及instanceof关键字有什么作用
2015/11/05 PHP
深入理解PHP原理之执行周期分析
2016/06/01 PHP
laravel5.1框架基础之Blade模板继承简单使用方法分析
2019/09/05 PHP
Laravel框架控制器,视图及模型操作图文详解
2019/12/04 PHP
深入认识javascript中的eval函数
2009/11/02 Javascript
javascript中处理时间戳为日期格式的方法
2014/01/02 Javascript
js showModalDialog弹出窗口实例详解
2014/01/07 Javascript
JavaScript设计模式之外观模式介绍
2014/12/28 Javascript
javascript实现跨域的方法汇总
2015/06/25 Javascript
基于jQuery实现简单的折叠菜单效果
2015/11/23 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
2016/10/28 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
vue实现页面加载动画效果
2017/09/19 Javascript
基于JavaScript 性能优化技巧心得(分享)
2017/12/11 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
vue使用screenfull插件实现全屏功能
2020/09/17 Javascript
python 判断自定义对象类型
2009/03/21 Python
Python多线程编程(六):可重入锁RLock
2015/04/05 Python
Python fileinput模块使用实例
2015/06/03 Python
Python的爬虫包Beautiful Soup中用正则表达式来搜索
2016/01/20 Python
virtualenv 指定 python 解释器的版本方法
2018/10/25 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
计算机二级python学习教程(2) python语言基本语法元素
2019/05/16 Python
Jupyter Notebook折叠输出的内容实例
2020/04/22 Python
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
加州风格的游泳和沙滩装品牌:Cupshe
2019/06/10 全球购物
包装类的功能、种类、常用方法
2012/01/27 面试题
自我评价的范文
2014/02/02 职场文书
室内设计专业自荐信
2014/05/31 职场文书
英语专业自荐书
2014/06/13 职场文书
反对邪教标语
2014/06/30 职场文书
纪律教育月活动总结
2014/08/26 职场文书
感谢信模板大全
2015/01/23 职场文书