看到一个不错的二维码动画，有个来回运动的扫描线上下运动，感觉不错，就扒下来了，如图，橙色的那根线来回运动，挺有意识的，原理是在Qrcode生成的Canvas顶部一个Div，这个div有个CSS3来回动画，顺便就搬下来。
一、所需的运行库
所需的库有jQuery 1.11.3 和 https://github.com/jeromeetienne/jquery-qrcode 配合食用
二、基础代码
HTML代码
<div class="qrcode-box">
<div class="qrcode" id="qrcode"></div>
<div class="scan-qrcode"></div>
</div>
JS 代码
$("#img_qr").qrcode({
ecLevel: "H",
render: "canvas",
text: url, //二维码内容
width: "120",
height: "120",
background: flase ? "#b73119" : "#ffffff", //二维码 背景颜色
foreground: "#000000",
src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAMA.............." //中间的图标 35px X 35px Png格式转Base64即可
})
CSS动画代码
.qrcode-box .scan-qrcode {
position: absolute;
top: 0;
left: 29px;
height: 1px;
background: #fff;
width: 115px;
box-shadow: 1px 1px 4px 2px #eeac08;
-webkit-animation: scanner 2s infinite;
animation: scanner 2s infinite;
}
@-webkit-keyframes scanner {
0% {
top: 12px
}
50% {
top: 110px
}
to {
top: 12px
}
}
@keyframes scanner {
0% {
top: 12px
}
50% {
top: 110px
}
to {
top: 12px
}
}