css 模糊加载动画的实现

àì夳堔傛蜴生んèń 2023-10-07 20:16 12阅读 0赞

#### 阅读目录 ####

*  阐述
 *   *  index.html
     *  index.js
     *  index.css

## 阐述 ##

JS实现的模糊加载动画效果，这个效果也是一个比较常见的效果，现在我们一起来看一下，今天练习的最终效果：

![在这里插入图片描述][8dbddfabba2841a69b8c2112ab4ab810.gif_pic_center]

### index.html ###

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8" />
    	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
    	<title>模糊加载动画的实现</title>
    	<link rel="stylesheet" href="./index.css">
    </head>
    <body>
    	
    	<section class="bg"></section>
    	<div class="loading-text">0%</div>
    	<script src="./index.js"></script>
    	
    </body>
    </html>

### index.js ###

const loadText = document.querySelector('.loading-text')
    const bg = document.querySelector('.bg')
    
    let load = 0
    
    let int = setInterval(blurring, 30)
    
    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
    }

### index.css ###

* {
        
      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('./images/01.png') no-repeat center center/cover;
      position: absolute;
      top: -30px;
      left: -30px;
      width: calc(50vw + 60px);
      height: calc(50vh + 60px);
      z-index: -1;
      filter: blur(0px);
    }
    
    .loading-text {
        
      font-size: 50px;
      color: #fff;
    }

[8dbddfabba2841a69b8c2112ab4ab810.gif_pic_center]: https://img-blog.csdnimg.cn/8dbddfabba2841a69b8c2112ab4ab810.gif#pic_center