前端纯css3实现二维码扫描特效

在线预览

https://jsrun.pro/AafKp/embed...

如果本文对你有用，对博主小额打赏，以资鼓励，分享更多有用的技能

先看效果：

第一步，实现网格背景：

background-image:linear-gradient(0deg,transparent 24%,rgba(32, 255, 77, 0.1) 25%,rgba(32, 255, 77, 0.1) 26%,transparent 27%,transparent 74%,rgba(32, 255, 77, 0.1) 75%,rgba(32, 255, 77, 0.1) 76%,transparent 77%,transparent),linear-gradient(90deg,transparent 24%,rgba(32, 255, 77, 0.1) 25%,rgba(32, 255, 77, 0.1) 26%,transparent 27%,transparent 74%,rgba(32, 255, 77, 0.1) 75%,rgba(32, 255, 77, 0.1) 76%,transparent 77%,transparent);
background-size: 3rem 3rem;
background-position: -1rem -1rem;

第二部实现扫码线以及渐变背景特效

background: linear-gradient(180deg, rgba(0, 255, 51, 0) 50%, #00ff33 300%);
border-bottom: 2px solid #00ff33;

四角特效

就是四个宽高相等的正方形，分别设置边框即可。

设置扫描动画

@keyframes radar-beam { 0% { transform: translateY(-110%); } 100% { transform: translateY(120%); }
}

完整代码：

在线预览

http://jsrun.net/AafKp/embedded/result,css,html/light/

本文是转载的，这是我觉得最方便好用，可拓展的扫描二维码的样式。再次感谢博主。