主要思路:设置一个定时器动态更改背景的高斯模糊效果和进度文字的透明度
<!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
}
结果如下图
Q.E.D.