CSSはQRコードスキャンの効果を実現します

この記事では、CSS を使用して QR コードのスキャン効果を実現する方法を紹介します。必要な方は参考にしていただければ幸いです。

QR コードをスキャンする効果、書くのは難しいと思っていましたが、よく考えてみると、実際には非常に簡単で、コードを数行書くだけで機能します。

<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はQRコードスキャンの効果を実現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。