写在前面
今天练习一个JS实现的模糊加载动画效果，这个效果也是一个比较常见的效果，现在我们一起来看一下，今天练习的最终效果：
<html><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>【每日一练】40—模糊加载动画的实现</title></head><body><section class="bg"></section><div class="loading-text">0%</div></body></html>
* {box-sizing: border-box;}body {font-family: 'Ubuntu', sans-serif;display: flex;align-items: center;justify-content: center;height: 100vh;overflow: hidden;margin: 0;}.bg {background: url('images/01.jpg')no-repeat center center/cover;position: absolute;top: -30px;left: -30px;width: calc(100vw + 60px);height: calc(100vh + 60px);z-index: -1;filter: blur(0px);}.loading-text {font-size: 50px;color: #fff;}
const loadText = document.querySelector('.loading-text')const bg = document.querySelector('.bg')let load = 0let int = setInterval(blurring, 30)function blurring() {load++if (load > 99) {clearInterval(int)}loadText.innerText = `${load}%`loadText.style.opacity = scale(load, 0, 100, 1, 0)bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)`}const scale = (num, in_min, in_max, out_min, out_max) => {return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min}
写在最后
以上就是我们今天的【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
推荐练习
学习更多技能
请点击下方公众号
