CSS实现二维码扫描的效果

扫描二维码的效果，我原以为不好写呢，后来想了想其实挺简单的，几行代码，走起

<p class="code-bg"><br>    <p class="line"></p><br></p><br>

.code-bg{<br>
    position: relative; <br>
    height: 200px; width: 200px; <br>
    margin: 0px auto;/*此处为了居中*/<br>
    background: url(img/ewm1.jpg) center top no-repeat; /*二维码*/<br>
}<br>
.line{ <br>
    position: absolute; <br>
    left: -80px; <br>
    z-index: 2; <br>
    height: 3px; width: 360px; <br>
    background: url(img/share/dapai.png) no-repeat; /*上下扫的线*/<br>
    /*动画效果*/<br>
    animation: myScan 1s infinite alternate; <br>
    -webkit-animation: myScan 1s infinite alternate; <br>
}<br>
@keyframes  myScan{<br>
    from { top:0px; }<br>
    to { top: 197px; }<br>
}<br>
-webkit-@keyframes  myScan{<br>
    from { top:0px; }<br>
    to { top: 197px; }<br>
}<br>

我这里不方便截图，那就这样吧，是不是很简单。

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问 CSS视频教程！

相关推荐：

php公益培训视频教程

CSS在线手册

div/css图文教程

以上就是CSS实现二维码扫描的效果的详细内容，更多请关注Gxl网其它相关文章！