css3 二维码 添加 扫描特效

<section data-role="paragraph" class="_135editor" style="border: 0px none;">
    <p>
        <br/>
    </p>
</section>

<div class="ocrloader">
    <em></em>
    <img src="https://oss.wujiwangluo.com/system_weixin/images/reckon/qrcode_for_gh.jpg">
    <span></span>
</div>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body {
        height: 100vh;
        position: relative;
    }
    .ocrloader {

        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        backface-visibility: hidden;
    }
    .ocrloader img{
        width: 140px;
        height: 140px;
    }
    .ocrloader span {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 10px;
        background-color: rgba(45, 183, 183, 0.54);
        z-index: 1;
        animation: move 1.5s infinite;
        -webkit-animation: move 1.5s infinite;
    }
    
    .ocrloader:before,
    .ocrloader:after,
    .ocrloader em:after,
    .ocrloader em:before {
        border-color: #000;
        content: "";
        position: absolute;
        width: 19px;
        height: 16px;
        border-style: solid;
        border-width: 0px;
    }
    .ocrloader:before {
        left: 0;
        top: 0;
        border-left-width: 1px;
        border-top-width: 1px;
    }
    .ocrloader:after {
        right: 0;
        top: 0;
        border-right-width: 1px;
        border-top-width: 1px;
    }
    .ocrloader em:before {
        left: 0;
        bottom: 0;
        border-left-width: 1px;
        border-bottom-width: 1px;
    }
    .ocrloader em:after {
        right: 0;
        bottom: 0;
        border-right-width: 1px;
        border-bottom-width: 1px;
    }
    @keyframes move {
        from {top: 0px;}
        to {top: 130px;}
    }
    /* Safari and Chrome */
    @-webkit-keyframes move {
        from {top: 0px;}
        to {top: 130px;}
    }
</style>