在线预览
先看效果:
第一步,实现网格背景:
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>
以上就是css3实现二维码扫描特效的示例的详细内容,更多关于CSS3 二维码扫描特效的资料请关注脚本之家其它相关文章!
"Code tailor",为前端开发者提供技术相关资讯以及系列基础文章,微信关注“小和...
用于测试启动的 Shell 命令 本文的编写目的,更多的在于介绍性能、启动测试以及...
命令简介 atop 命令是一款监控 Linux 系统资源与进程的工具,非内部命令,需要安...
因为要验证我的几个应用能否移植到鸿蒙,仔细看了下鸿蒙,当然作为开发者,肯定...
"Code tailor",为前端开发者提供技术相关资讯以及系列基础文章,微信关注“小和...
meta http-equiv=X-UA-Compatible content=IE=7 / 以上代码告诉IE浏览器,无论是...
kubectl 是 Kubernetes 自带的客户端,可以用它来直接操作 Kubernetes 集群。 日...
考虑以下两段代码: 复制代码 代码如下: urlset url lochttp://www.caixw.com/ar...
原理 hover 的时候对元素设置阴影:box-shadow,使其样式与常态不同。 box-shado...
题目: if (a == 1 a == 2 a == 3) { console.log(1); } ?在什么情况下会输出1?...