制作這個(gè)掃一掃的動(dòng)畫，用了2張圖片。一個(gè)是“方框的四個(gè)角（2.png）”，一個(gè)是“網(wǎng)格（4.png）”。

截圖

使用css3 的animation屬性，使“網(wǎng)格”從上往下移動(dòng)，顯示掃描效果。

<u>查看demo</u>

HTML結(jié)構(gòu)

    <div class="bg">
    <div class="pane"></div>
    </div>

css樣式

.bg, .pane {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            overflow: hidden;  /* 隱藏顯示區(qū)域外的內(nèi)容*/
        }

        .bg {
            position: relative;
            background: url(images/2.png) center center no-repeat;
            border: 1px solid #b0f9e4;
        }

        .pane {
            position: absolute;
            z-index: -1;
            background: url(images/4.png) center center no-repeat;
            animation: move 1.5s ease-in-out infinite ;
            -webkit-animation: move 1.5s ease-in-out infinite;
        }

為網(wǎng)格設(shè)置animation動(dòng)畫，循環(huán)一次時(shí)長(zhǎng)為 1.5s，ease-in-out動(dòng)畫由快到慢再到快結(jié)束動(dòng)畫，infinite無(wú)限循環(huán)。

        @keyframes move {
            from{top:-200px}  /*網(wǎng)格移動(dòng)到顯示區(qū)域的外面*/
            to{top:0}
        }
        -webkit-@keyframes move {
            from{top:-200px}
            to{top:0}
        }

定義move 動(dòng)畫，從上到下移動(dòng)。