CSS 模糊加载特效

主要思路：设置一个定时器动态更改背景的高斯模糊效果和进度文字的透明度

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=w, initial-scale=1.0">
  <title>Blurry Loading</title>

  <link rel="stylesheet" href="./style.css">

</head>
<body>
  
  <section class="bg"></section>
  <div class="loading-text">0%</div>

  <script src="./script.js"></script>
</body>
</html>

*{
  box-sizing: border-box;
}

body{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

.bg{
  position: absolute;
  width: 100vw;
  height: 100vh;
  background: url('../public/images/1.webp') no-repeat center center/cover;
  z-index: -1;
  filter: blur(0px);
}

.loading-text{
  font-size: 50px;
  color: #fff;
}

bg = document.querySelector('.bg')
loadingText = document.querySelector('.loading-text')

let load = 0

let loadInterval = setInterval(blurring, 30)

function blurring() {
  load++

  if (load > 99) {
    clearInterval(loadInterval)
  }

  loadingText.innerText = `${load}%`
  loadingText.style.opacity = 1 - normalize(load, 0, 100, 0, 1)
  bg.style.filter = `blur(${30 - normalize(load, 0, 100, 0, 30)}px)`
}

// 标准化：将val值从[in_min, in_max] 区间映射到 [out_min, out_max] 区间，主要由于高斯模糊最大值为30px
function normalize(val, in_min, in_max, out_min, out_max) {
  return (val - in_min) * (out_max - out_min) / (in_max - in_min) + out_min
}