css3实现微信扫码登陆动画

在做微信扫码登陆时，出现一个背景光图上下扫码动画，用css3+图片实现。
实现原理：
1.准备一个渐变的背景.png图
2.css动画帧实现动画

看效果：

css代码：

#wx-scan{position: absolute;top:0px;left: 50%;z-index: 3;margin-left: -100px;height: 200px;overflow: hidden}
#wx-scan:after{content: '';display: block;width:100%;position: absolute;top:-60px;right: 0;background:url("../images/scan_bg.png") center center no-repeat;background-size: cover;height: 60px;z-index: 999;animation: scan 3s linear infinite;-webkit-animation: scan 3s linear infinite;}
@keyframes scan {from{top:-60px;} to{top: 260px}}
@-webkit-keyframes scan {from{top:-60px;} to{top: 260px}}

扫码背景图：