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 相关文章推荐
全面解析CSS Media媒体查询使用操作(推荐)
Aug 15 HTML / CSS
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
Dec 28 HTML / CSS
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
Oct 11 HTML / CSS
CSS超出文本指定宽度用省略号代替和文本不换行
May 05 HTML / CSS
使用CSS3实现SVG路径描边动画效果入门教程
Oct 21 HTML / CSS
CSS3中新增的对文本和字体的设置
Feb 03 HTML / CSS
基于Canvas+Vue的弹幕组件的实现
Jul 23 HTML / CSS
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
Jul 22 HTML / CSS
Canvas图片分割效果的实现
Jul 29 HTML / CSS
html5移动端禁止长按图片保存的实现
Apr 20 HTML / CSS
POST提交数据常见的四种方式
Jan 18 HTML / CSS
CSS使用Flex和Grid布局实现3D骰子
Aug 05 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
几个学习PHP的网址
2006/11/25 PHP
PHP 采集程序 常用函数
2008/12/18 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
php使用PDO获取结果集的方法
2017/02/16 PHP
PHP echo()函数讲解
2019/02/15 PHP
tp5框架内使用tp3.2分页的方法分析
2019/05/05 PHP
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
2013/10/29 Javascript
jquery的trigger和triggerHandler的区别示例介绍
2014/04/20 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
javascript基于HTML5 canvas制作画箭头组件
2014/06/25 Javascript
不同编码的页面表单数据乱码问题解决方法
2015/02/15 Javascript
js确认框confirm()用法实例详解
2016/01/07 Javascript
Angular2中如何使用ngx-translate进行国际化
2017/05/21 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
python魔法方法-自定义序列详解
2016/07/21 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
Laravel+Dingo/Api 自定义响应的实现
2019/02/17 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
构建高效的python requests长连接池详解
2020/05/02 Python
电信专业毕业生推荐信
2013/11/18 职场文书
同事吵架检讨书
2014/02/05 职场文书
给老婆大人的检讨书
2014/02/24 职场文书
房产继承公证书
2014/04/09 职场文书
反腐倡廉演讲稿
2014/05/22 职场文书
应届大学生自荐书
2014/06/17 职场文书
刑事代理授权委托书
2014/09/17 职场文书
运动会运动员赞词
2015/07/22 职场文书
小学班主任研修日志
2015/11/13 职场文书
2016机关干部作风建设心得体会
2016/01/21 职场文书
python b站视频下载的五种版本
2021/05/27 Python
PyTorch device与cuda.device用法
2022/04/03 Python