05-Blurry-Loading 模糊加载效果

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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>

css

@import url('https://fonts.googleapis.com/css?family=Ubuntu');

*{
    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('https://images.unsplash.com/photo-1576161787924-01bb08dad4a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2104&q=80')
    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;
}

javascript

const loadText = document.querySelector('.loading-text');
const bg =document.querySelector('.bg');

let load=0;

let int = setInterval(blurring,10);

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
}