导读 摘要 今天小编跟大家讲解下有关纯css3实现二维码扫描特效 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关纯css3实现二维码...
摘要 今天小编跟大家讲解下有关纯css3实现二维码扫描特效 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关纯css3实现二维码扫描特 今天小编跟大家讲解下有关纯css3实现二维码扫描特效 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关纯css3实现二维码扫描特效 的相关资料，希望小伙伴们看了有所帮助。
https://jsrun.pro/AafKp/
如果本文对你有用 对博主小额打赏 以资鼓励 分享更多有用的技能先看效果：
第一步 实现网格背景：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%); } }完整代码：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>css3-scanner.html</title> <style> html, body { height: 100%; margin: 0; } .qr-scanner { 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; width: 100%; height: 100%; position: relative; background-color: #111; } .qr-scanner .box { width: 75vw; height: 75vw; max-height: 75vh; max-width: 75vh; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden; border: 0.1rem solid rgba(0, 255, 51, 0.2); } .qr-scanner .line { height: calc(100% - 2px); width: 100%; background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%); border-bottom: 3px solid #00ff33; transform: translateY(-100%); animation: radar-beam 2s infinite; animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99); animation-delay: 1.4s; } .qr-scanner .box:after, .qr-scanner .box:before, .qr-scanner .angle:after, .qr-scanner .angle:before { content: ''; display: block; position: absolute; width: 3vw; height: 3vw; border: 0.2rem solid transparent; } .qr-scanner .box:after, .qr-scanner .box:before { top: 0; border-top-color: #00ff33; } .qr-scanner .angle:after, .qr-scanner .angle:before { bottom: 0; border-bottom-color: #00ff33; } .qr-scanner .box:before, .qr-scanner .angle:before { left: 0; border-left-color: #00ff33; } .qr-scanner .box:after, .qr-scanner .angle:after { right: 0; border-right-color: #00ff33; } @keyframes radar-beam { 0% { transform: translateY(-100%); } 100% { transform: translateY(0); } } </style></head><body> <div class="qr-scanner"> <div class="box"> <div class="line"></div> <div class="angle"></div> </div> </div></body></html>原文：https://segmentfault.com/a/1190000021957142
来源：爱蒂网
版权声明：本文由用户上传，如有侵权请联系删除！