css 模糊加载动画的实现

阐述

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

index.html

DOCTYPE html>


	
	
	模糊加载动画的实现
	


	
	
	0%
	
	

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;
}