【每日一练】79—CSS实现扫描二维码动画
web前端开发
共 2128字，需浏览 5分钟
· 2022-10-15
<html><head><title>【每日一练】79—CSS实现扫描二维码动画</title></head><body><div class="scan"><div class="qrcode"></div><h3>二维码扫描中...</h3><div class="border"></div></div></body></html>
*{margin: 0;padding: 0;box-sizing: border-box;font-family: consolas;}body{display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #111;}.scan{position: relative;display: flex;flex-direction: column;align-items: center;}.scan .qrcode{position: relative;width: 400px;height: 400px;background: url(QR_Code01.png);background-size: 400px;}.scan .qrcode::before{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(QR_Code02.png);background-size: 400px;overflow: hidden;animation: animate 4s ease-in-out infinite;}@keyframes animate{0%,100%{height: 20px;}50%{height: calc(100% - 20px);}}.scan .qrcode::after{content: '';position: absolute;inset: 20px;width: calc(100% - 40px);height: 2px;background: #35fd5c;filter: drop-shadow(0 0 20px #35fd5c) drop-shadow(0 0 60px #35fd5c);animation: animate_line 4s ease-in-out infinite;}@keyframes animate_line{0%,100%{top: 20px;}50%{top: calc(100% - 20px);}}.border{position: absolute;inset: 0px;background: url(border.png);background-size: 400px;background-repeat: no-repeat;animation: animate_text 0.5s linear infinite;}@keyframes animate_text{0%,100%{opacity: 0;}50%{opacity: 1;}}.scan h3{text-transform: uppercase;font-size: 2em;letter-spacing: 2px;margin-top: 20px;color: #fff; filter: drop-shadow(0 0 20px #fff) drop-shadow(0 0 60px #fff);animation: animate_text 0.5s steps(1) infinite;}
写在最后
以上就是我们今天的【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号
评论