首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

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 二维码扫描特效的资料请关注三水点靠木其它相关文章！

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

- Author -

浅笑·

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
详解Css3新特性应用之过渡与动画
Jan 10 HTML / CSS
今天学到的CSS最新技术(与图片背景相关)
Dec 24 HTML / CSS
css3和jquery实现自定义checkbox和radiobox组件
Apr 22 HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
Sep 10 HTML / CSS
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
Mar 07 HTML / CSS
使用html5 canvas创建太空游戏的示例
May 08 HTML / CSS
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
Mar 15 HTML / CSS
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
Mar 21 HTML / CSS
HTML5进阶段内联标签汇总（小篇）
Jul 13 HTML / CSS
HTML5视频播放插件 video.js介绍
Sep 29 HTML / CSS
html输入两个数实现加减乘除功能
Jul 01 HTML / CSS
HTML基础详解(上)
Oct 16 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
Navicat(1) V Rising(1) commit(1) 内置函数(1) pytz(1) harbor(1) GoFrame(3) 自定义函数(1) Tablespace(1) procedure(1)
You might like
那些年我们错过的魔术方法（Magic Methods）
2014/01/14 PHP
PHP中的reflection反射机制测试例子
2014/08/05 PHP
php的sso单点登录实现方法
2015/01/08 PHP
php简单统计中文个数的方法
2016/09/30 PHP
JS获取scrollHeight问题想到的标准问题
2007/05/27 Javascript
读jQuery之八 包装事件对象
2011/06/21 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
2015/07/27 Javascript
Node.js编写组件的三种实现方式
2016/02/25 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
2016/09/23 Javascript
Javascript+CSS3实现进度条效果
2016/10/28 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
2017/02/05 Javascript
详解Angular 4.x 动态创建组件
2017/04/25 Javascript
JavaScript初学者必看“new”
2017/06/12 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
2017/08/02 Javascript
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
2018/12/05 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
2019/08/21 Javascript
vue实现二级导航栏效果
2019/10/19 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
js实现简易拖拽的示例
2020/10/26 Javascript
vue实现下载文件流完整前后端代码
2020/11/17 Vue.js
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
python 生成不重复的随机数的代码
2011/05/15 Python
用Python编写一个国际象棋AI程序
2014/11/28 Python
简介Python设计模式中的代理模式与模板方法模式编程
2016/02/02 Python
利用Python生成文件md5校验值函数的方法
2017/01/10 Python
利用python实现命令行有道词典的方法示例
2017/01/31 Python
python+selenium实现自动抢票功能实例代码
2018/11/23 Python
Django框架HttpRequest对象用法实例分析
2019/11/01 Python
天鹅湖观后感
2015/06/09 职场文书
英语投诉信范文
2015/07/03 职场文书
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS