其他
【每日一练】79—CSS实现扫描二维码动画
<!DOCTYPE html><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;}写在最后
以上就是我们今天的【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号