css实现二维码扫描效果

博主： literature
发布时间：2020 年 04 月 17 日
146 次浏览
关闭评论
2073字数
分类：主机教程

首先来看看效果

代码





    
    
    css3-scanner

版权属于：逍遥子大表哥

本文链接：https://blog.bbskali.cn/1934.html

按照知识共享署名-非商业性使用 4.0 国际协议进行许可，转载引用文章应遵循相同协议。

最后修改：2023 年 08 月 04 日

如果觉得我的文章对你有用，请随意赞赏

此处评论已关闭

css实现二维码扫描效果

literature • 2020 年 04 月 17 日

<h3>首先来看看效果</h3><p><img src="https://blog.bbskali.cn/usr/uploads/2020/04/550796568.gif" alt="二维码扫描效果" title="二维码扫描效果" style="" class="aligncenter"style=""></p><h3>代码</h3><pre><code class="lang-html"><!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    
    <title>css3-scanner</title>
    <style>
   
    
    .qr-scanner {
        
         position: relative;
            height: 200px; width: 200px;
            margin: 0px auto;/*此处为了居中*/
        background:url("er.jpg");
        background-repeat: no-repeat;
    }

.qr-scanner .box {
        width: 30vw;
        height: 30vw;
        max-height: 30vh;
        max-width: 30vh;
        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>

</html></code></pre><p><hr class="content-copyright" style="margin-top:50px"></p><div class="post-copyright" style="font-style:normal"><p class="iconfont-copyright"><i class="glyphicon glyphicon-copyright-mark"></i></p><p class="content-copyright">版权属于：逍遥子大表哥</p><p class="content-copyright">本文链接：https://blog.bbskali.cn/1934.html</p><p class="content-copyright">按照知识共享署名-非商业性使用 4.0 国际协议进行许可，转载引用文章应遵循相同协议。</p></div>

css实现二维码扫描效果

首先来看看效果

代码

live/msn等微软绝版邮箱详细的注册教程

欢迎使用 Typecho

一个功能强大又好用的RSS订阅器：FreshRSS安装教程

VPS使用BaiduPCS-Go高速下载百度网盘的文件，支持上传/离线下载等操作

使用Caddy申请免费的Let’s Encrypt泛域名SSL证书

UIKit, AppKit等类的进程处理

【全网首发】新拟态个人主页/引导页尝鲜版

解忧云匿名短信平台源码-星泽V社

API调试工具Postman介绍-星泽V社

原神口袋工具用于查看原神实时数据的小软件

css实现二维码扫描效果