CSS3 animation 属性实现“扫一扫”动画效果

制作这个扫一扫的动画，用了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 动画，从上到下移动。