知识点
- 文字垂直水平居中
- 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);