第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是一个与其他农民一样懒的人。 他讨厌骑马，因此从来不两次经过一个栅栏。 你必须编一个程序，读入栅栏网络的描述，并计算出一条修栅栏的路径…...
网络六边形受到攻击
大家读完觉得有帮助记得关注和点赞！！！ 抽象 现代智能交通系统 （ITS） 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 （…...
论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）
HoST框架核心实现方法详解 - 论文深度解读（第二部分） 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章： 论文深度解读 + 算法与代码分析（二） 作者机构： 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题： 人形机器人…...
Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动
一、前言说明 在2011版本的gb28181协议中，拉取视频流只要求udp方式，从2016开始要求新增支持tcp被动和tcp主动两种方式，udp理论上会丢包的，所以实际使用过程可能会出现画面花屏的情况，而tcp肯定不丢包，起码…...
React Native 开发环境搭建（全平台详解）
React Native 开发环境搭建（全平台详解） 在开始使用 React Native 开发移动应用之前，正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南，涵盖 macOS 和 Windows 平台的配置步骤，如何在 Android 和 iOS…...
Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例
使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件，常用于在两个集合之间进行数据转移，如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model：绑定右侧列表的值&…...
Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...
论文笔记——相干体技术在裂缝预测中的应用研究
目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术：基于互相关的相干体技术（Correlation）第二代相干体技术：基于相似的相干体技术（Semblance）基于多道相似的相干体…...
C/C++ 中附加包含目录、附加库目录与附加依赖项详解
在 C/C 编程的编译和链接过程中，附加包含目录、附加库目录和附加依赖项是三个至关重要的设置，它们相互配合，确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中，这些概念容易让人混淆，但深入理解它们的作用和联…...
在 Spring Boot 项目里，MYSQL中json类型字段使用
前言： 因为程序特殊需求导致，需要mysql数据库存储json类型数据，因此记录一下使用流程 1.java实体中新增字段 private List<User> users 2.增加mybatis-plus注解 TableField(typeHandler FastjsonTypeHandler.class) private Lis…...
Kafka主题运维全指南：从基础配置到故障处理
#作者：张桐瑞 文章目录 主题日常管理1. 修改主题分区。2. 修改主题级别参数。3. 变更副本数。4. 修改主题限速。5.主题分区迁移。6. 常见主题错误处理常见错误1：主题删除失败。常见错误2：__consumer_offsets占用太多的磁盘。 主题日常管理 …...