重庆分公司
重庆分公司，新征程启航
为企业提供网站建设、域名注册、服务器等服务
[前端小项目] 模糊加载 blurry loading (50projects50days)
????前言
- 这个小项目源于github项目:✨50 projects 50 days, 这个项目包含了50个小型前端项目，适合学习了Html+Css+JavaScript但是还没有学习框架的前端新手作为练习。
- 这里是原项目对模糊加载的代码实现????Blurry Loading.
????分析
创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都做网站、网站制作、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的文登网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！
- 变化过程：
- 数字从0不断增长到100；
- 中间的百分比数字逐渐消失，即透明度
opacity到1到0； - 背景图片从模糊变为清晰，滤镜
filter:blur()的参数设置为从30px到0px.
????布局
body使用flex布局，将文字置于屏幕中央即可。
????图片大小
- 图片的宽高如果只是设置成
100vw和100vh的话，在边界处会出现白色模糊区域(滤镜导致)。 - 可以将背景图片的宽高设置大一些，然后再调整
top和left属性，然后body设置overflow:hidden;，将白色模糊区域置于“屏幕”之外。
⏱进度模拟
- JavaScript中使用setInterval()即可模拟进度不断增加。
- 在进度值达到100时，使用clearInterval()取消进度增加。
????不同数值范围之间的映射
- 由于进度值是从0到100，而数字文本的
opacity参数是从1到0，模糊滤镜的参数值是从30到0，不同的数值范围之间需要有一个映射关系。
| 变量名 | 意义 |
|---|---|
| $in\_min$ | 输入范围的起始值 |
| $in\_max$ | 输入范围的终止值 |
| $input$ | 输入的值 |
| $out\_min$ | 输出范围的起始值 |
| $out\_max$ | 输出范围的终止值 |
| $output$ | 输出的值，即映射得到的值 |
输入值在输入范围内占比：
\[scale_0 = \frac{input-in\_min}{in\_max - in\_min} \]网页名称：[前端小项目] 模糊加载 blurry loading (50projects50days)
文章出自：http://cqcxhl.cn/article/dsojpdo.html