Blurry Loading
主要知识点:
全屏弹性背景图片的处理
.bg {
background:url('https://images5.alphacoders.com/939/939923.jpg')
no-repeat center/cover;
/*绝对定位:相对于父元素继续定位,并且进行偏移*/
position:absolute;
top:-30px;
left:-30px;
width:calc(100vw + 60px);
height:calc(100vh + 60px);
/*z-index: -1;*/
/*当背景模糊以后,文字一同被模糊,如何解决????*/
/*filter:blur(30px);*/
}
将背景图片和文字分别放到两个不同的盒子里,这样可以避免模糊图片也将文字模型
设置绝对定位:将背景图片的定位设置为absolute,由于没有开启定位的父元素,这样图片会相对于html进行定位.之后调整top和left
为什么top和left会设置为-30px?
Answer:top和left实际上是盒子脱离了HTML文档流以后的定位基准点,即从浏览器视窗左上角30px处开始显示内容.但是,我设置了top和left均是0px,实际上显示效果并没有区别.
calc函数的作用是什么?
Answer:动态计算盒子的长度和宽度,此时变量会随着视窗的变化而变化
JS部分
const div = document.getElementsByClassName('bg')[0];
const text = document.getElementsByClassName('text')[0];
console.log(div);
var num = 100;
setInterval(()=>{
var str = 'blur('+num+'px)';
div.style.filter = str;
if(num>0){
num--;
}
},8);
var opacity = 100;
setInterval(()=>{
var str2 = opacity+'%';
text.innerHTML = str2;
text.style.opacity = str2;
if(opacity>0){
opacity--;
}
},8);
使用setIntrval()函数.
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BlurryLoading</title>
</head>
<body>
<div>
<div class="bg"></div>
<div class = "text">0%</div></div>
</div>
</body>
<style>
* {
/*margin:0;*/
/*实际上这个属性在本案例中基本无影响*/
box-sizing: border-box;
}
body {
/*flexbox模型*/
display: flex;
align-items: center;
justify-content:center;
height:100vh;
margin:0;
overflow:hidden;
}
.bg {
background:url('https://images5.alphacoders.com/939/939923.jpg')
no-repeat center/cover;
/*绝对定位:相对于父元素继续定位,并且进行偏移*/
position:absolute;
top:0px;
left:0px;
width:calc(100vw + 30px);
height:calc(100vh + 30px);
/*z-index: -1;*/
/*当背景模糊以后,文字一同被模糊,如何解决????*/
/*filter:blur(30px);*/
}
/*截止到目前文字无法正常显示,猜测原因是因为top和left属性导致文字便宜到可是页面外部*/
.text{
color: white;
font-size: 60px;
text-align: center;
/*position:relative;*/
/*top:40vh;*/
/*z-index: 99;*/
opacity: 50%;
}
</style>
<script>
// 首先获取元素
const div = document.getElementsByClassName('bg')[0];
const text = document.getElementsByClassName('text')[0];
console.log(div);
var num = 100;
setInterval(()=>{
var str = 'blur('+num+'px)';
div.style.filter = str;
if(num>0){
num--;
}
},8);
var opacity = 100;
setInterval(()=>{
var str2 = opacity+'%';
text.innerHTML = str2;
text.style.opacity = str2;
if(opacity>0){
opacity--;
}
},8);
</script>
</html>
本文含有隐藏内容，请 开通VIP 后查看