「原生练手」从模糊到清晰的特效实现图片加载进度条，你会如何实现？

本篇文章我们会实现一个图片加载特效，特效的效果是让图片从模糊的状态随着加载进度的推进，逐渐变得清晰，效果图如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IaozeRXE-1658297373656)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/eddce828746546c0873c81de734586f0~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)]

如果让你实现这样的特效，你会如何实现呢？先别往下看，先思考一下甚至可以动手尝试一下，再接着看下去看看我和你的思路有什么不同吧，欢迎把你的思路在评论区留言分享出来

1. 思考实现思路

1. 首先我们肯定要有一个背景元素，然后还要有一个进度文本元素
2. 给背景图片设置一个模糊度，并且这个模糊度应当随着进度的推进而不断变得清晰，这是从效果图中能够明显看出来的
3. 还有文字也应该设置一下透明度，需要随着进度的推进而不断从不透明变成透明，也就是opacity要从1变成0

主要就是做到以上三点，很显然，核心就在于如何将图片加载进度和背景图片模糊度建立一个映射关系，比如图片加载进度为0的时候，背景图片的模糊度应当为30px，而当图片加载进度推进，这个模糊度应当逐步下降，最终下降至0

还需要建立图片加载进度和加载文字不透明度之间的映射，也就是说当加载进度为0的时候，加载文字的不透明度应当为1，随着图片加载进度推进，这个不透明都逐渐增大，直到加载进度为100%时，让加载文字的不透明度变为0，也就是不再显示

---

2. HTML 结构

明确了以上的思路，我们首先来实现最简单的HTML结构，代码如下：

<div class="background"></div>
<p class="loading-text">0%</p> 

没错，就只需要简单的一个div作为背景元素，一个p作为加载文本元素即可

---

3. CSS 样式

3.1 加载图片居中显示

为了让加载文字水平垂直居中显示，将body设置为flex布局，并且主轴和交叉轴方向上的对齐方式都是center

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  padding: 0;
} 

---

3.2 背景图片样式

为了让背景图片不遮挡文字的显示，我们应当用绝对定位让其脱离文档流，并且z-index设置为-1使其不要遮挡加载文本的显示

其次，为了让图片能够居中显示，使用background-position的center属性

同时为了防止图片比例被破坏，我们可以使用background-size的cover