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

web前端开发

共 1808字,需浏览 4分钟

 ·

2022-08-08 16:58


写在前面

今天练习一个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 {  backgroundurl('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—一个简单的弹出框效果的实现


学习更多技能

请点击下方公众号

浏览 16
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报