CSS realizes the effect of QR code scanning

This article will introduce how to use CSS to achieve the effect of QR code scanning. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The effect of scanning the QR code, I thought it was difficult to write, but then I thought about it, it is actually quite simple, just a few lines of code, and it works

.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; }
 }

It is not convenient for me to take screenshots here, so That's it, isn't it?

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study. For more related tutorials, please visitCSS Video Tutorial!

Related recommendations:

php public welfare training video tutorial

CSS Online Manual

##div/css graphic tutorial

The above is the detailed content of CSS realizes the effect of QR code scanning. For more information, please follow other related articles on the PHP Chinese website!