50Projects--Blurry Loading-CSDN博客

本文链接：https://blog.csdn.net/m0_63254971/article/details/126630949

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>