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 相关文章推荐
在HTML5中如何使用CSS建立不可选的文字
Oct 17 HTML / CSS
纯css3实现的竖形无限级导航
Dec 10 HTML / CSS
用css3实现转换过渡和动画效果
Mar 13 HTML / CSS
html5基础教程常用技巧整理
Aug 20 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
Apr 10 HTML / CSS
HTML5 history新特性pushState、replaceState及两者的区别
Dec 26 HTML / CSS
基于html5绘制圆形多角图案
Apr 21 HTML / CSS
webView加载html图片遇到的问题解决
Oct 08 HTML / CSS
canvas实现烟花的示例代码
Jan 16 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
Feb 25 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
Dec 04 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
Feb 24 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
收音机的保养
2021/03/01 无线电
基于递归实现的php树形菜单代码
2014/11/19 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
AngularJS中指令的四种基本形式实例分析
2016/11/22 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
2017/03/27 Javascript
JavaScript之RegExp_动力节点Java学院整理
2017/06/29 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
2017/10/08 Javascript
动态Axios的配置步骤详解
2018/01/12 Javascript
React.js绑定this的5种方法(小结)
2018/06/05 Javascript
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
2018/10/15 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
用Vue.js在浏览器中实现裁剪图像功能
2019/06/18 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
2020/09/11 Javascript
Python lxml模块安装教程
2015/06/02 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
python爬虫超时的处理的实例
2018/12/19 Python
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
简单了解python 邮件模块的使用方法
2019/07/24 Python
python Plotly绘图工具的简单使用
2020/03/03 Python
Python日志:自定义输出字段 json格式输出方式
2020/04/27 Python
Python爬虫实现HTTP网络请求多种实现方式
2020/06/19 Python
大数据分析用java还是Python
2020/07/06 Python
Python中lru_cache的使用和实现详解
2021/01/25 Python
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
瑞士设计师家具和家居饰品网上商店:Bruno Wickart
2019/03/18 全球购物
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
移风易俗倡议书
2014/04/15 职场文书
结对共建工作方案
2014/06/02 职场文书
行政答辩状范文
2015/05/21 职场文书
CSS 鼠标选中文字后改变背景色的实现代码
2023/05/21 HTML / CSS