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制作精致的照片墙特效
Jun 07 HTML / CSS
CSS3 简单又实用的5个属性
Mar 04 HTML / CSS
纯css3(无图片/js)制作的几个社交媒体网站的图标
Mar 21 HTML / CSS
CSS3中使用RGBa来调节透明度的教程
May 09 HTML / CSS
图解CSS3制作圆环形进度条的实例教程
May 26 HTML / CSS
CSS3制作彩色进度条样式的代码示例分享
Jun 23 HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
Mar 02 HTML / CSS
CSS3自定义滚动条样式的示例代码
Aug 21 HTML / CSS
css3实现文字扫光渐变动画效果的示例
Nov 07 HTML / CSS
html5 button autofocus 属性介绍及应用
Jan 04 HTML / CSS
详解HTML5中div和section以及article的区别
Jul 14 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 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
ThinkPHP标签制作教程
2014/07/10 PHP
深入理解PHP变量的值类型和引用类型
2015/10/21 PHP
Laravel timestamps 设置为unix时间戳的方法
2019/10/11 PHP
javascript 仿QQ滑动菜单效果代码
2010/09/03 Javascript
xml转json的js代码
2012/08/28 Javascript
js中日期的加减法
2015/05/06 Javascript
JavaScript定时器和优化的取消定时器方法
2015/07/03 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
2016/01/08 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
Google 爬虫如何抓取 JavaScript 的内容
2017/04/07 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
jQuery 利用ztree实现树形表格的实例代码
2017/09/27 jQuery
axios对请求各种异常情况处理的封装方法
2018/09/25 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
2019/03/13 Javascript
vue实现微信二次分享以及自定义分享的示例
2019/03/20 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
[05:06]TI4西雅图DOTA2前线报道 海涛密探LGD训练
2014/07/09 DOTA
[01:23:59]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 VP vs Secret
2018/04/03 DOTA
python django集成cas验证系统
2014/07/14 Python
浅谈Python中数据解析
2015/05/05 Python
详解Python爬虫的基本写法
2016/01/08 Python
python实现识别手写数字 python图像识别算法
2020/03/23 Python
Python File(文件) 方法整理
2019/02/18 Python
如何在Django配置文件里配置session链接
2019/08/06 Python
Python数据库小程序源代码
2019/09/15 Python
python 求10个数的平均数实例
2019/12/16 Python
Pytorch 高效使用GPU的操作
2020/06/27 Python
5款实用的python 工具推荐
2020/10/13 Python
倩碧美国官网:Clinique美国
2016/07/20 全球购物
简述安装Slackware Linux系统的过程
2012/05/08 面试题
建筑专业自荐信
2013/10/18 职场文书
《蚂蚁和蝈蝈》教学反思
2014/02/24 职场文书
考试诚信承诺书
2014/05/23 职场文书
先进个人总结范文
2015/02/15 职场文书
PyTorch梯度裁剪避免训练loss nan的操作
2021/05/24 Python
MySQL分区表管理命令汇总
2022/03/21 MySQL