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