CSS實現二維碼掃描的效果

這篇文章跟大家介紹如何用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實現二維碼掃描的效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！