编程 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实现圆角效果（含IE兼容解决方法）

May 07 HTML / CSS

css3弹性盒模型（Flexbox）详细介绍

Oct 08 HTML / CSS

纯CSS3制作漂亮带动画效果的主机价格表

Apr 25 HTML / CSS

基于DOM+CSS3实现OrgChart组织结构图插件

Mar 02 HTML / CSS

CSS3 边框效果

Nov 04 HTML / CSS

用css3实现转换过渡和动画效果

Mar 13 HTML / CSS

Android本地应用打开方法——通过html5写连接

Mar 11 HTML / CSS

网易微博Web App用HTML5开发的过程介绍

Jun 13 HTML / CSS

html5 CSS过度-webkit-transition使用介绍

Jul 02 HTML / CSS

钉钉企业内部H5微应用开发详解

May 12 HTML / CSS

table设置超出部分隐藏，鼠标移上去显示全部内容的方法

Dec 24 HTML / CSS

CSS 鼠标选中文字后改变背景色的实现代码

May 21 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+ajax 实现输入读取数据库显示匹配信息

2015/10/08 PHP

php传值和传引用的区别点总结

2019/11/19 PHP

权威JavaScript 中的内存泄露模式

2007/08/13 Javascript

js 获取中文拼音,Select自动匹配字母获取值的代码

2009/09/23 Javascript

JavaScript实现的一个计算数字步数的算法分享

2014/12/06 Javascript

js+html5绘制图片到canvas的方法

2015/06/05 Javascript

JS+DIV+CSS排版布局实现美观的选项卡效果

2015/10/10 Javascript

javascript如何实现360度全景照片问题汇总

2016/04/04 Javascript

深入浅析JavaScript中的Function类型

2016/07/09 Javascript

解析微信JS-SDK配置授权，实现分享接口

2016/12/09 Javascript

微信小程序图表插件(wx-charts)实例代码

2017/01/17 Javascript

JS轮播图实现简单代码

2021/02/19 Javascript

nodejs多版本管理总结

2018/04/03 NodeJs

vueScroll实现移动端下拉刷新、上拉加载

2019/03/22 Javascript

面试题：react和vue的区别分析

2019/04/08 Javascript

js实现随机数小游戏

2019/06/28 Javascript

layui 数据表格复选框实现单选功能的例子

2019/09/19 Javascript

原生JS利用transform实现banner的无限滚动示例代码

2020/06/15 Javascript

[15:41]教你分分钟做大人——灰烬之灵

2015/03/11 DOTA

使用pyecharts无法import Bar的解决方案

2020/04/23 Python

Python实现的计算马氏距离算法示例

2018/04/03 Python

Python 隐藏输入密码时屏幕回显的实例

2019/02/19 Python

linux环境中没有网络怎么下载python

2019/07/07 Python

django基础学习之send_mail功能

2019/08/07 Python

Python 合并多个TXT文件并统计词频的实现

2019/08/23 Python

pandas 空数据处理方法详解

2019/11/02 Python

用css3实现当鼠标移进去时当前亮其他变灰效果

2014/04/08 HTML / CSS

Bally巴利中国官网：经典瑞士鞋履、手袋及配饰奢侈品牌

2018/10/09 全球购物

酒店个人求职信范文

2014/01/25 职场文书

百日安全活动总结

2014/05/04 职场文书

教师查摆问题自查报告

2014/10/11 职场文书

2015年出纳工作总结与计划

2015/05/18 职场文书

2015年“我们的节日·重阳节”活动总结

2015/07/29 职场文书

成本低的5个创业项目：投资小、赚钱快

2019/08/20 职场文书

怎样写好演讲稿题目？

2019/08/21 职场文书

idea下配置tomcat避坑详解

2022/04/12 Servers