制作這個掃一掃的動畫，用了2張圖片。一個是“方框的四個角（2.png）”，一個是“網格（4.png）”。

截圖

使用css3 的animation屬性，使“網格”從上往下移動，顯示掃描效果。

<u>查看demo</u>

HTML結構

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

css樣式

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

        .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;
        }

為網格設置animation動畫，循環一次時長為 1.5s，ease-in-out動畫由快到慢再到快結束動畫，infinite無限循環。

        @keyframes move {
            from{top:-200px}  /*網格移動到顯示區域的外面*/
            to{top:0}
        }
        -webkit-@keyframes move {
            from{top:-200px}
            to{top:0}
        }

定義move 動畫，從上到下移動。