CSS实现二维码扫描的效果
扫描二维码的效果,我原以为不好写呢,后来想了想其实挺简单的,几行代码,走起
<div class="code-bg"> <div class="line"></div> </div>
.code-bg{ position: relative; height: 200px; width: 200px; margin: 0px auto;/*此处为了居中*/ background: url(img/ewm1.jpg) center top no-repeat; /*二维码*/ } .line{ position: absolute; left: -80px; z-index: 2; height: 3px; width: 360px; background: url(img/share/dapai.png) no-repeat; /*上下扫的线*/ /*动画效果*/ animation: myScan 1s infinite alternate; -webkit-animation: myScan 1s infinite alternate; } @keyframes myScan{ from { top:0px; } to { top: 197px; } } -webkit-@keyframes myScan{ from { top:0px; } to { top: 197px; } }
我这里不方便截图,那就这样吧,是不是很简单。这样就实现了