css实现扫描动效

莲青见卿

已于 2023-08-09 11:51:33 修改

阅读量455

点赞数 1

文章标签： css html css3

于 2023-02-14 13:45:40 首次发布

本文链接：https://blog.csdn.net/vh_YUNYANGYUMO/article/details/129025437

版权

扫描图示例

<!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%;
        transform: translateY(-100%);
        animation: radar-beam 5s 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%);
            background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);
            border:0;
            border-bottom: 3px solid #00ff33;
        }
 
        25% {
            transform: translateY(0);
            background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);
            border:0;
            border-bottom: 3px solid #00ff33;
        }
        26% {
            transform: translateX(-100%);
            background: linear-gradient(90deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);
            border:0;
            border-right: 3px solid #00ff33;
        }
 
        50% {
            transform: translateX(0);
            background: linear-gradient(90deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);
            border:0;
            border-right: 3px solid #00ff33;
        }

        51% {
            transform: translateX(100%);
            background: linear-gradient(-90deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);
            border:0;
            border-left: 3px solid #00ff33;
        }
 
        75% {
            transform: translateX(-100%);
            background: linear-gradient(-90deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);
            border:0;
            border-left: 3px solid #00ff33;
        }
        76% {
            transform: translateY(100%);
            background: linear-gradient(360deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);
            border:0;
            border-top: 3px solid #00ff33;
        }
 
        100% {
            transform: translateY(-100%);
            background: linear-gradient(360deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);
            border:0;
            border-top: 3px solid #00ff33;
        }
    }
    </style>
</head>
 
<body>
    <div class="qr-scanner">
        <div class="box">
            <div class="line"></div>
            <div class="angle"></div>
        </div>
    </div>
</body>
 
</html>