写在前面

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

这个是一个GIF图片，录制的效果效果没有实际网页显示的效果好，有兴趣的小伙伴，可以通过浏览器来看一下这个效果，会比录屏的GIF动画更加流畅。

具体的代码，我放在文章里，请往下看。

HTML代码：

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>【每日一练】40—模糊加载动画的实现</title>  </head>  <body>    <section class="bg"></section>    <div class="loading-text">0%</div>  </body></html>

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

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}

写在最后

以上就是我们今天的【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。

我是杨小爱，我们明天见。

推荐练习

【每日一练】39—七夕节背景轮播图效果的实现

【每日一练】38—黑暗模式效果的实现

【每日一练】37—自动打字效果的实现

【每日一练】36—CSS实现一款炫酷的3D 文本旋转效果

【每日一练】35—一个简单的弹出框效果的实现

【每日一练】40—模糊加载动画的实现

学习更多技能请点击下方公众号

学习更多技能
请点击下方公众号