制作這個掃一掃的動畫，用了2張圖片俗冻。一個是“方框的四個角（2.png）”，一個是“網(wǎng)格（4.png）”牍颈。
截圖
使用css3 的animation屬性迄薄，使“網(wǎ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動畫讥蔽，循環(huán)一次時長為 1.5s，ease-in-out動畫由快到慢再到快結(jié)束動畫画机，infinite無限循環(huán)冶伞。
@keyframes move {
from{top:-200px} /*網(wǎng)格移動到顯示區(qū)域的外面*/
to{top:0}
}
-webkit-@keyframes move {
from{top:-200px}
to{top:0}
}
定義move 動畫，從上到下移動步氏。
