css3实现二维码扫描特效的示例


Posted in HTML / CSS onOctober 29, 2020

在线预览

https://jsrun.pro/AafKp/

先看效果:

css3实现二维码扫描特效的示例

第一步,实现网格背景:

background-image:
    linear-gradient(0deg,
    transparent 24%,
    rgba(32, 255, 77, 0.1) 25%,
    rgba(32, 255, 77, 0.1) 26%,
    transparent 27%,
    transparent 74%,
    rgba(32, 255, 77, 0.1) 75%,
    rgba(32, 255, 77, 0.1) 76%,
    transparent 77%,
    transparent),
    linear-gradient(90deg,
    transparent 24%,
    rgba(32, 255, 77, 0.1) 25%,
    rgba(32, 255, 77, 0.1) 26%,
    transparent 27%,
    transparent 74%,
    rgba(32, 255, 77, 0.1) 75%,
    rgba(32, 255, 77, 0.1) 76%,
    transparent 77%,
    transparent);
background-size: 3rem 3rem;
background-position: -1rem -1rem;

第二部实现扫码线以及渐变背景特效

background: linear-gradient(180deg, rgba(0, 255, 51, 0) 50%, #00ff33 300%);
border-bottom: 2px solid #00ff33;

四角特效

就是四个宽高相等的正方形,分别设置边框即可。

设置扫描动画

@keyframes radar-beam {  
    0% {  
        transform: translateY(-110%);  
  }  
  
    100% {  
        transform: translateY(120%);  
  }  
}

完整代码:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>css3-scanner.html</title>
    <style>
    html,
    body {
        height: 100%;
        margin: 0;
    }

    .qr-scanner {
        background-image:
            linear-gradient(0deg,
            transparent 24%,
            rgba(32, 255, 77, 0.1) 25%,
            rgba(32, 255, 77, 0.1) 26%,
            transparent 27%,
            transparent 74%,
            rgba(32, 255, 77, 0.1) 75%,
            rgba(32, 255, 77, 0.1) 76%,
            transparent 77%,
            transparent),
            linear-gradient(90deg,
            transparent 24%,
            rgba(32, 255, 77, 0.1) 25%,
            rgba(32, 255, 77, 0.1) 26%,
            transparent 27%,
            transparent 74%,
            rgba(32, 255, 77, 0.1) 75%,
            rgba(32, 255, 77, 0.1) 76%,
            transparent 77%,
            transparent);
        background-size: 3rem 3rem;
        background-position: -1rem -1rem;
        width: 100%;
        height: 100%;
        position: relative;
        background-color: #111;
    }

    .qr-scanner .box {
        width: 75vw;
        height: 75vw;
        max-height: 75vh;
        max-width: 75vh;
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        overflow: hidden;
        border: 0.1rem solid rgba(0, 255, 51, 0.2);
    }

    .qr-scanner .line {
        height: calc(100% - 2px);
        width: 100%;
        background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);
        border-bottom: 3px solid #00ff33;
        transform: translateY(-100%);
        animation: radar-beam 2s infinite;
        animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
        animation-delay: 1.4s;
    }

    .qr-scanner .box:after,
    .qr-scanner .box:before,
    .qr-scanner .angle:after,
    .qr-scanner .angle:before {
        content: '';
        display: block;
        position: absolute;
        width: 3vw;
        height: 3vw;

        border: 0.2rem solid transparent;
    }

    .qr-scanner .box:after,
    .qr-scanner .box:before {
        top: 0;
        border-top-color: #00ff33;
    }

    .qr-scanner .angle:after,
    .qr-scanner .angle:before {
        bottom: 0;
        border-bottom-color: #00ff33;
    }

    .qr-scanner .box:before,
    .qr-scanner .angle:before {
        left: 0;
        border-left-color: #00ff33;
    }

    .qr-scanner .box:after,
    .qr-scanner .angle:after {
        right: 0;
        border-right-color: #00ff33;
    }

    @keyframes radar-beam {
        0% {
            transform: translateY(-100%);
        }

        100% {
            transform: translateY(0);
        }
    }
    </style>
</head>

<body>
    <div class="qr-scanner">
        <div class="box">
            <div class="line"></div>
            <div class="angle"></div>
        </div>
    </div>
</body>
</html>

以上就是css3实现二维码扫描特效的示例的详细内容,更多关于CSS3 二维码扫描特效的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
纯CSS3实现质感细腻丝滑按钮
Mar 09 HTML / CSS
使用css3制作登录表单的步骤
Apr 07 HTML / CSS
结合CSS3的布局新特征谈谈常见布局方法
Jan 22 HTML / CSS
CSS3实现王者匹配时的粒子动画效果
Apr 12 HTML / CSS
HTML5网页音乐播放器的示例代码
Nov 09 HTML / CSS
html5的localstorage详解
May 09 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
Jan 09 HTML / CSS
HTML5实现获取地理位置信息并定位功能
Apr 25 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
Dec 29 HTML / CSS
canvas实现滑动验证的实现示例
Aug 11 HTML / CSS
z-index不起作用
Mar 31 HTML / CSS
HTML中实现音乐或视频自动播放案例详解
May 30 HTML / CSS
CSS3实现彩色进度条动画的示例
Oct 29 #HTML / CSS
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
Oct 29 #HTML / CSS
css3实现简单的白云飘动背景特效
Oct 28 #HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
Oct 28 #HTML / CSS
关于css中margin的值和垂直外边距重叠问题
Oct 27 #HTML / CSS
CSS3 实现弹跳的小球动画
Oct 26 #HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 #HTML / CSS
You might like
编写漂亮的代码 - 将后台程序与前端程序分开
2008/04/23 PHP
检查url链接是否已经有参数的php代码 添加 ? 或 &amp;
2010/02/09 PHP
基于empty函数的判断详解
2013/06/17 PHP
将二维数组转为一维数组的2种方法
2014/05/26 PHP
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
用 Composer构建自己的 PHP 框架之设计 MVC
2014/10/30 PHP
PHP实现的简单路由和类自动加载功能
2018/03/13 PHP
RR vs IO BO3 第二场2.13
2021/03/10 DOTA
Alliance vs Liquid BO3 第二场2.13
2021/03/10 DOTA
jQuery学习笔记之jQuery的DOM操作
2010/12/22 Javascript
了解Javascript的模块化开发
2015/03/02 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
五步轻松实现zTree的使用
2017/11/01 Javascript
基于jquery.page.js实现分页效果
2018/01/01 jQuery
nginx+vue.js实现前后端分离的示例代码
2018/02/12 Javascript
javascript实现倒计时关闭广告
2021/02/09 Javascript
[01:56]《DOTA2》中文配音CG
2013/04/22 DOTA
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
Python中super()函数简介及用法分享
2016/07/11 Python
完美解决python遍历删除字典里值为空的元素报错问题
2016/09/11 Python
Python 实现某个功能每隔一段时间被执行一次的功能方法
2018/10/14 Python
在Python运行时动态查看进程内部信息的方法
2019/02/22 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
澳大利亚工具仓库:Tools Warehouse
2018/10/15 全球购物
Vita Fede官网:在意大利手工制作,在纽约市设计
2019/10/25 全球购物
荷叶圆圆教学反思
2014/02/01 职场文书
优秀教师演讲稿
2014/05/06 职场文书
企业宣传标语
2014/06/09 职场文书
乡镇八一建军节活动方案
2014/08/24 职场文书
2014年设计师工作总结
2014/11/25 职场文书
2015年度质量工作总结报告
2015/04/27 职场文书