跳转到帖子

游客您好，欢迎来到黑客世界论坛！您可以在这里进行注册。

赤队小组-代号1949（原CHT攻防小组）在这个瞬息万变的网络时代，我们保持初心，创造最好的社区来共同交流网络技术。您可以在论坛获取黑客攻防技巧与知识，您也可以加入我们的Telegram交流群 共同实时探讨交流。论坛禁止各种广告，请注册用户查看我们的使用与隐私策略，谢谢您的配合。小组成员可以获取论坛隐藏内容！

TheHackerWorld官方

css实现二维码扫描效果

CHT丨情报收集
CHT丨情报收集
在 WEB和服务器安全漏洞

精选回复

发布于

首先来看看效果

二维码扫描效果

代码

<!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>

<body>
    <div class="qr-scanner">
        <div class="box">
            <div class="line"></div>
            <div class="angle"></div>
        </div>
    </div>
</body>

</html>

版权属于：逍遥子大表哥

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

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

创建帐户或登录后发表意见

转到主题列表

最近浏览 0

  • 没有会员查看此页面。