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

制作这个扫一扫的动画，用了2张图片。一个是“方框的四个角(2.png)”，一个是“网格(4.png)”。

截图

使用css3 的animation属性，使“网格”从上往下移动，显示扫描效果。

查看demo

HTML结构

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 动画，从上到下移动。