第5个-模糊加载
Day 5 - Blurry Loading
1. 项目展示
2. 分析思路
- 变化过程
- 数字从 0 不断增长到 100；
- 中间的百分比数字逐渐消失，即透明度 opacity 从 1 到 0；
- 背景图片从模糊变为清晰，滤镜 filter.blur()的参数设置为从 30px 到 0px。
小 tips：
filter属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。
-
布局
body 使用**
flex**布局，将文字置于屏幕中央。 -
图片大小:
图片的宽高如果知识设置成 100vw 和 100vh 的话，可在边界处出现白色模糊区域（滤镜导致）。
解决办法：可以将背景图片的宽高设置大一些，然后再调整**
top和left属性，然后 body 设置overflow:hidden**;将白色模糊区域置于“屏幕之外”。 -
进度模拟
- Javascript 中使用**
setInterval()**即可模拟进度不断增加。 - 在进度值达到 100 时，使用**
cleartInterval()**取消进度增加。
- Javascript 中使用**
-
不同数值范围之间的映射
由于进度值是从 0 到 100，而数字文本的**
opacity**参数是从 1 到 0，模糊滤镜的参数值是从 30 到 0，不同的数值范围之间需要有一个映射关系。
输入值在输入范围内占比：
输出值在输出范围内的占比：
又因为输入值在输入范围内的占比与输出值在输出范围中的占比应保持一致：
化简后，可得输出值 output：
function scale(num, inMin, inMax, outMin, outMax) {return ((num - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
}
该函数代码参考自 StackOverflowmap a range of numbers to another range of numbers
该笔记参考自https://www.cnblogs.com/feixianxing/p/web-mini-project-blurry-loading-html-css-javascript-50-projects-50-days-GitHub.html
3. 代码实现
3.1. HTML
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>第5个-模糊加载</title><link rel="stylesheet" href="./style.css" /></head><body><!-- 背景图片 --><section class="bg"></section><!-- 加载文字 --><div class="loading-text">0%</div><script src="./script.js"></script></body>
</html>
3.2. CSS
* {box-sizing: border-box;
}
/* 设置默认属性 */
body {display: flex;justify-content: center;align-items: center;height: 100vh;overflow: hidden;margin: 0;
}
.bg {background: url("https://images.unsplash.com/photo-1576161787924-01bb08dad4a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2104&q=80")no-repeat center center / cover;position: absolute;top: -30px;left: -30px;width: calc(100vw + 60px);height: calc(100vh + 60px);filter: blur(0px);z-index: -1;
}
.loading-text {color: #fff;font-size: 50px;
}
3.3. Javascript
// 获取文字和图片元素
const loadText = document.querySelector(".loading-text");
const bg = document.querySelector(".bg");let load = 0;
let int = setInterval(blurring, 30);// 定义一个blurring函数
function blurring() {load++;// 判断 如果load等于100 就停止定时器if (load > 99) {clearInterval(int);}loadText.innerHTML = `${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;
};
相关文章：
第5个-模糊加载
Day 5 - Blurry Loading 1. 项目展示 2. 分析思路 变化过程 数字从 0 不断增长到 100；中间的百分比数字逐渐消失，即透明度 opacity 从 1 到 0；背景图片从模糊变为清晰，滤镜 filter.blur()的参数设置为从 30px 到 0px。 小 tips…...
rtt设备io框架面向对象学习-adc设备
目录 1.adc设备基类2.adc设备基类的子类3.初始化/构造流程3.1设备驱动层3.2 设备驱动框架层3.3 设备io管理层 4.总结5.使用 1.adc设备基类 此层处于设备驱动框架层。也是抽象类。 在/ components / drivers / include / drivers 下的adc.h定义了如下adc设备基类 struct rt_ad…...
面试官：介绍一下Exception和Error之间的区别
前言 大家好，我是chowley，在我之前的面试中，遇到过这样一个问题：Exception和Error之间有什么区别？今天我就来好好地总结一下！ 主体 在Java编程中，Exception和Error都是Java中的可抛出对象&am…...
【RabbitMQ（一）】：基本介绍 | 配置安装与快速入门
应该是新年前最后一篇博客了，明天浅浅休息一下，提前祝大家新年快乐捏！😊😊😊 01. 基础理解 1.1 同步调用和异步调用 👉 同步调用 的时候调用者会 阻塞 等待被调用函数或方法执行完成ÿ…...
ElasticSearch之search API
写在前面 本文看下查询相关内容，这也是我们在实际工作中接触的最多的，所以有必要好好学习下！ 1：查询的分类 主要分为如下2类： 1:基于get查询参数的URI search 2：基于post body的request body search&am…...
07-Java桥接模式 ( Bridge Pattern )
Java桥接模式 摘要实现范例 桥接模式（Bridge Pattern）是用于把抽象化与实现化解耦，使得二者可以独立变化 桥接模式涉及到一个作为桥接的接口，使得实体类的功能独立于接口实现类，这两种类型的类可被结构化改变而互不影…...
golang集成sentry: go-redis
网上没有找到go-redis集成sentry的库， 所以我简单实现了一个 代码： https://github.com/Shujie-Tan/go-redis-sentry 使用方法： import (redis_sentry "github.com/Shujie-Tan/go-redis-sentry" ) rdb : redis.NewClient(&re…...
用EXCEL从地址(上海)中提取各区(浦东新区等区)信息
背景： 朋友工作需要经常用EXCEL把各上海用户收货地址中的区提取出来，之前一直手动处理，希望我帮忙用EXCEL公式直接提取处理。 数据样式： 中国上海市浦东新区A小区 上海徐汇区B小区 中国，上海，浦东新区&a…...
关于在分布式环境中RVN和使用场景的介绍3
简介 在《关于在分布式环境中RVN和使用场景的介绍2》和《关于在分布式环境中RVN和使用场景的介绍1》中我们介绍了RVN的概念和在一些具体用例中的使用。在本文中我们讨论一下在分布式环境中使用RVN需要注意的问题。 问题 我们在收到一条待处理的事件时，需要检查该…...
计算最小公倍数math.lcm()
【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 计算最小公倍数 math.lcm() 请问以下代码输出的结果是？ import math print("【执行】math.lcm(2, 4)") print(math.lcm(2, 4)) print("【执行】math.lcm(1, 2, 3…...
VUE SEO 几种方案经典面试题
1、SSR服务器渲染 Vue.js 是构建客户端应用程序的框架。默认情况下，可以再浏览器中输出Vue组件，进行生成DOM和操作DOM。然而，也可以将同一个组件渲染未服务器端的HTML字符串，将它们直接发送到浏览器，最后将这些静态标…...
Python和VBA批量提取Word中的表格
表格在word文档中常见的文档元素之一。操作word文件时有时需要提取文件中多个表格的内容到一个新的文件，甚至有时还会要提取题注信息。 今天，给大家分享两种批量提取文档中表格的两种方法，分别是VBA法和Python法两种。 一、VBA法提取word中…...
Swift Combine 有序的异步操作 从入门到精通十二
Combine 系列 Swift Combine 从入门到精通一Swift Combine 发布者订阅者操作者 从入门到精通二Swift Combine 管道 从入门到精通三Swift Combine 发布者publisher的生命周期 从入门到精通四Swift Combine 操作符operations和Subjects发布者的生命周期 从入门到精通五Swift Com…...
国产航顺HK32F030M: 超声波测距模块串口通信数据接收与处理
参考代码 /************************************************************************************************** * file usart_async_tx_no_int_rx_rxneint.c * brief 异步串口通信例程, 通过查询TXE标志发送数据,通过RXNE中断接收数据,当中断接收到数据后会将 * …...
idea:如何连接数据库
1、在idea中打开database: 2、点击 ‘’ ---> Data Source ---> MySQL 3、输入自己的账号和密码其他空白处可以不填，用户和密码可以在自己的mysql数据库中查看 4、最后选择自己需要用的数据库，点击运用ok，等待刷新即可 最后：…...
JS中ES5和ES6的区别
前言 ES5是JavaScript的第五个修订版本，于2009年发布。而ES6是JavaScript的第六个修订版本，也称为ES2015，于2015年发布。以下是它们两个版本之前的一些区别： 变量声明方式 在ES5中，使用var关键字进行变量声明&#…...
软考24-上午题-图1
一、数据结构的回忆 线性结构：（一对一） 除首结点没有前驱、末尾结点没有后继外，一个结点只有唯一的一个直接前驱和唯一的一个直接后继。 树结构：（一对多） 除根节点没有前驱节点外，…...
书生·浦语大模型第四课作业
基础作业： 构建数据集，使用 XTuner 微调 InternLM-Chat-7B 模型, 让模型学习到它是你的智能小助手，效果如下图所示，本作业训练出来的模型的输出需要将不要葱姜蒜大佬替换成自己名字或昵称！ 1.安装 # 如果你是在 Int…...
勒索攻击风起云涌，Sodinokibi深度分析
前言 Sodinokibi勒索病毒，又称为REvil勒索病毒，这款勒索病毒最早在国内被发现是2019年4月份，笔者在早期分析这款勒索病毒的时候就发现它与其他勒索病毒不同，于是被笔者称为GandCrab勒索病毒的“接班人”，为什么它是Ga…...
1124. 骑马修栅栏（欧拉路径，模板）
农民John每年有很多栅栏要修理。 他总是骑着马穿过每一个栅栏并修复它破损的地方。 John是一个与其他农民一样懒的人。 他讨厌骑马，因此从来不两次经过一个栅栏。 你必须编一个程序，读入栅栏网络的描述，并计算出一条修栅栏的路径…...
告别DAC！用Arduino的PWM信号和双光耦，轻松驱动LM317实现4-20mA隔离输出
用Arduino PWM与双光耦打造高性价比4-20mA隔离输出方案 在工业自动化与物联网设备开发中，4-20mA电流环传输因其抗干扰能力强、传输距离远等优势，成为模拟信号传输的黄金标准。传统方案通常依赖昂贵的DAC芯片实现数字到模拟的转换，而本文将揭…...
模拟面试回答第十三问：JVM内存模型
JVM简介 JVM是Java程序运行的基石，包括程序计数器，两种栈，堆和方法区五个区域。包含保存类元数据，保存方法字节码执行顺序，保存符号引用与直接地址的映射，为对象实例分配内存，为堆中内存分配对象…...
Hearthstone-Script：炉石传说自动化脚本的革新实践
Hearthstone-Script：炉石传说自动化脚本的革新实践 【免费下载链接】Hearthstone-Script Hearthstone script（炉石传说脚本）（2024.01.25停更至国服回归） 项目地址: https://gitcode.com/gh_mirrors/he/Hearthstone-S…...
SAP事务代码中文描述变成了英文如何解决
背景是接到用户反馈，事务代码的中文描述突然变成了英文，我检查了用户的参数文件，登录语言是选择的ZH，经过检查发现是新主题权限角色批量维护的时候出现了问题。只需要将权限角色更改成修正即可。用户的菜单页面1、PFCG检查发现权限…...
2026知识付费平台选择指南：学习者与创作者如何各取所需
2026年，知识付费行业已进入成熟期。据艾媒咨询（iiMedia Research）预测，2026 年中国知识付费市场规模将突破3000 亿元，较 2025 年的 2808.8 亿元持续增长。然而，平台分化加剧——有的平台陷入内容同质化困境…...
阿里开源神器CosyVoice2体验：用四川话、高兴语气说话，AI语音控制真简单
阿里开源神器CosyVoice2体验：用四川话、高兴语气说话，AI语音控制真简单 1. 快速体验：3秒克隆你的声音 1.1 一键部署指南 作为阿里云开源的轻量级语音克隆工具，CosyVoice2-0.5B的部署简单到令人惊讶。只需在服务器上执行以下命令…...
STM32主从定时器实战：用CubeMX搞定PWM移相+动态调占空比（附G474配置）
STM32主从定时器实战：CubeMX图形化配置PWM移相与动态调占空比 在电力电子和电机控制领域，精确的PWM信号控制是系统高效运行的关键。对于需要多路相位可调PWM的应用场景，如交错并联DC/DC变换器、三相逆变器等，传统的手动寄存器配置…...
--ajax)
JS知识点汇总(十九)--ajax
1. 说说ajax的原理，以及如何实现？ AJAX 全称(Async Javascript and XML) 即异步的 JavaScript 和 XML，是一种创建交互式网页应用的网页开发技术，可以在不重新加载整个网页的情况下，与服务器交换数据，并且更…...
AIVideo效果展示：输入主题输出专业视频，惊艳案例分享
AIVideo效果展示：输入主题输出专业视频，惊艳案例分享 1. 专业级视频生成效果概览 AIVideo一站式AI长视频工具能够将简单的文字主题转化为完整的专业视频作品。只需输入一个主题，系统就会自动完成从文案创作、分镜设计、画面生成到配音剪辑的…...
Ubuntu常用的命令
ls -l # 输出当前文件夹下的所有文件的权限大小信息 ls -l 文件名 # 输出当前文件的权限大小信息 du -sh # 查看文件夹下所有文件的大小总和 df -h # 查看当前文件系统各分区的大小 hdparm -Tt /dev/sda1 # 查看分区磁盘的速度 ls -l | grep "^-" | wc -l # 当前目…...