前端小项目7 # BlurryLoading 背景图模糊加载，文字逐渐透明

知识点

• 文字垂直水平居中
• background 属性
• 模糊效果
• 透明效果
• 原生JavaScript获取DOM
• 定时器

介绍

模糊的背景图上有当前的背景图加载进度的文字“0%”，随着背景图越来越清晰，加载进度逐渐接近“100%”，进度文字样式越来越透明。

代码

html:

<div class="content"></div>
<p class="loading-text"></p>

css:

body{
    
    
    margin: 0;
    padding: 0;
}
.content{
    
    
    width: 100vw;
    height: 100vh;
    background: url('https://picsum.photos/id/1/3000/900') no-repeat;
    background-size: cover;
}
.loading-text{
    
    
    position: absolute;
    top: 50vh;
    left: 50vw;
    font-size: 50px;
    font-weight: bold;
    text-align: center;
    color: rgb(255, 255, 255);
    transform: translate(-50%, -50%);
}

javascript:

const loadingText = document.querySelector(".loading-text")
const content = document.querySelector(".content")
let i = 0
let interval = setInterval(() => {
    
    
    loadingText.innerText = `${
      
      ++i}%`
    let opacity = 1-Math.floor(i/10)*0.1
    loadingText.style.opacity = opacity
    content.style.filter = `blur(${
      
      10*opacity}px)`
    if(i==100){
    
    
        clearInterval(interval)
    }
}, 30);