css 模糊加载动画的实现

阐述

JS实现的模糊加载动画效果，这个效果也是一个比较常见的效果，现在我们一起来看一下，今天练习的最终效果：

index.html

 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 } 

index.css

* { 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.png') no-repeat center center/cover; position: absolute; top: -30px; left: -30px; width: calc(50vw + 60px); height: calc(50vh + 60px); z-index: -1; filter: blur(0px); } .loading-text { font-size: 50px; color: #fff; }