使用CSS实现酷炫加载
使用CSS实现酷炫加载
效果展示

整体页面布局
<div class="container"></div>
使用JavaScript添加loading加载动画的元素
document.addEventListener("DOMContentLoaded", () => {let container = document.querySelector(".container");for (let j = 0; j < 4; j++) {let loader = document.createElement("div");loader.classList.add("loader");loader.style.setProperty("--j", j);for (let i = 0; i <= 20; i++) {let span = document.createElement("span");span.style.setProperty("--i", i);loader.appendChild(span);}container.appendChild(loader);}});
编写loading元素样式
.container {display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #042104;
}.loader {position: relative;transform: rotate(calc(45deg * var(--j)));
}.loader span {position: absolute;transform: rotate(calc(18deg * var(--i)));
}.loader span {position: absolute;
}.loader span::before {content: "";position: absolute;width: 15px;height: 15px;border: 2px solid #00ff0a;border-radius: 2px;animation: animate 5s linear infinite;animation-delay: calc(-0.5s * var(--i));
}.loader:nth-child(even) span::before {background: #00ff0a;
}
实现上述代码后,效果如下:

实现loading动画
@keyframes animate {0% {transform: translateX(250px) scale(4);opacity: 0;}50% {opacity: 1;}100% {transform: translateX(-10px) scale(0);}
}
使用 filter 属性修改颜色
.container {filter: hue-rotate(70deg);
}
完整代码下载
完整代码下载
相关文章:
使用CSS实现酷炫加载
使用CSS实现酷炫加载 效果展示 整体页面布局 <div class"container"></div>使用JavaScript添加loading加载动画的元素 document.addEventListener("DOMContentLoaded", () > {let container document.querySelector(".container&q…...
【STM32-HAL库】AHT10温湿度传感器使用(STM32F407ZGT6配置i2c)(附带工程下载连接)
一、温湿度传感器: 温湿度传感器是一种能够检测环境中的温度和湿度,并将其转化为电信号输出的装置。它在智能家居、工业自动化、气象监测、农业等领域有着广泛的应用。 原理: 温湿度传感器通常基于不同的物理原理,以下是一些常见…...
深入理解网络通信: 长连接、短连接与WebSocket
在现代网络应用开发中,选择合适的通信方式对于应用的性能、效率和用户体验至关重要。本文将深入探讨三种常见的网络通信方式:长连接、短连接和WebSocket,分析它们的特点、区别以及适用场景。 1. 短连接 © ivwdcwso (ID: u012172506) 1.1 定义 短连接是指客户端和服务器…...
Linux·环境变量与进程地址空间
1. 命令行参数 各位可能见过main函数也是有参数的,只是我们平时写的代码都比较简单,用不到main函数的参数,下面我们看一下main函数的参数是什么又是怎么用的 我们看这样一段代码 其编译运行后的效果是这样的 我们将main函数后面的那两个参数叫…...
MYSQL 乐观锁
乐观锁是一种用于处理并发控制的策略,特别适用于读多写少的场景。在 MySQL 数据库中,乐观锁通常通过版本号或时间戳来实现。下面将详细介绍乐观锁的概念、实现方式以及在 MySQL 中的应用。 1. 乐观锁的概念 乐观锁的基本思想是:在对数据进行…...
SpringCloud入门(十二)全局过滤器和跨域
一、全局过滤器 全局过滤器的作用也是处理一切进入网关的请求和微服务响应,与GatewayFilter的作用一样。 区别在于GatewayFilter通过配置定义,处理逻辑是固定的,如果我们希望拦截请求,做自己的业务逻辑则没办法实现。而GlobalFilt…...
51单片机系列-按键检测原理
🌈个人主页:羽晨同学 💫个人格言:“成为自己未来的主人~” 独立按键是检测低电平的。 下面我们来看一张对应的电路原理图: 在这张图当中,P1,P2,P3内部都上拉了电阻,但是P0没有&am…...
基于元神操作系统实现NTFS文件操作(五)
1. 背景 本文主要介绍$Root元文件的解析。先介绍元文件的构成及各个部分的结构,然后结合上一篇博文中读取到的元文件内容,对测试磁盘中目标分区的根目录进行展示。 2. $Root元文件解析 (1)$Root元文件的结构 $Root元文件由两部…...
AutoCAD学习
AutoCAD学习 最基本操作 命令用途说明空格键确认键也可以是重复刚才的命令回车键也是确认键鼠标右键也可以选择确认LINE、L直线命令绘制直线DLI线性尺寸标注DIMLINEAR鼠标滚轮滚动放大缩小视图界面鼠标中键按住移动视图DAL对齐线性标注DIMALIGNED F8 正交模式ORTHOMODE Tab 切换…...
go的一些知识点
一.package 1.新建项目 新建一个itying文件夹,在里面使用命令 就能生成一个go项目。生成一个go.mod 2.调用别的包的代码 按照下面的目录层级生成代码 //clac.go package calcfunc Add(x, y int) int {return x y } func Sub(x, y int) int {return x - y }…...
前端 vue3 对接科大讯飞的语音在线合成API
主要的功能就是将文本转为语音,可以播放。 看了看官方提供的demo,嗯....没看懂。最后还是去网上找的。 网上提供的案例,很多都是有局限性的,我找的那个他只能读取第一段数据,剩下的不读取。 科大讯飞的接口…...
缺省参数
一、概念 在声明或定义函数时为函数的参数指定一个默认值,调用时,如果对应参数没有传参,则使用其默认值,否则使用指定的实参 void TestFunc(int a 0) {cout<<a<<endl; }int main() {TestFunc(); // 没有传参&am…...
Stable Diffusion绘画 | 来训练属于自己的模型:炼丹启动
经过前面几轮辛苦的准备工作之后,现在开始进入终篇的炼丹环节。 在「上传素材」页面,点击「开始训练」: 可以在「查看进度-进度」中,查看模型训练的整体进度: 求助!!!操作「开始训练…...
08_OpenCV文字图片绘制
import cv2 import numpy as npimg cv2.imread(image0.jpg,1) font cv2.FONT_HERSHEY_SIMPLEXcv2.rectangle(img,(500,400),(200,100),(0,255,0),20) # 1 dst 2 文字内容 3 坐标 4 5 字体大小 6 color 7 粗细 8 line type cv2.putText(img,flower,(200,50),font,1,(0,0,250)…...
【笔记】选择题笔记+数据结构笔记
文章目录 2014 41方法一先序遍历方法二 连通分量是极大连通子图 一个连通图的生成树是一个极小连通子图 无向图的邻接表中,第i个顶点的度为第i个链表中的结点数 邻接表和邻接矩阵对不同的操作各有优势。 最短路径算法: 单源最短路径 已知图G(V,E),我们…...
浅谈汽车智能座舱如何实现多通道音频
一、引言 随着汽车智能座舱的功能迭代发展,传统的 4 通道、6 通道、8 通道等音响系统难以在满足驾驶场景的需求,未来对于智能座舱音频质量和通道数会越来越高。接下来本文将浅析目前智能座舱如何实现音频功放,以及如何实现多路音频功放方案。…...
系统架构设计师教程 第13章 13.1层次式体系结构概述 笔记
13.1 层次式体系结构概述 分层式体系结构是一种最常见的架构设计方法,能有效地使设计简化,使设计的系统机构清晰,便于提高复用能力和产品维护能力。 层次式体系结构设计是将系统组成一个层次结构,每一层为上层服务,并…...
cnn突破一(先搞定三层反馈神经网络bpnet,c#实现)
惦记cnn很久了,一直搞机器视觉,走不出来,现在megauging已经实现,说明书也写了不少,该突破的突破了,该改进的也改进了,一个心病治好了,有空把人工智能在机器视觉上的延伸,…...
如何创建一个docker,给它命名,且下次重新打开它
1.创建一个新的docker并同时命名 docker run -it --name one ubuntu:18.04 /bin/bash 这时候我们已经创建了一个docker,并且命名为"one" 2.关闭当前docker exit 3.这时docker已经终止了,我们需要使用它要重新启动 docker start one 4.现在可以重新打…...
【D3.js in Action 3 精译_025】3.4 让 D3 数据适应屏幕(中)—— 线性比例尺的用法
当前内容所在位置(可进入专栏查看其他译好的章节内容) 第一部分 D3.js 基础知识 第一章 D3.js 简介(已完结) 1.1 何为 D3.js?1.2 D3 生态系统——入门须知1.3 数据可视化最佳实践(上)1.3 数据可…...
基于算法竞赛的c++编程(28)结构体的进阶应用
结构体的嵌套与复杂数据组织 在C中,结构体可以嵌套使用,形成更复杂的数据结构。例如,可以通过嵌套结构体描述多层级数据关系: struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...
Debian系统简介
目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版ÿ…...
STM32+rt-thread判断是否联网
一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...
Python实现prophet 理论及参数优化
文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候,写过一篇简单实现,后期随着对该模型的深入研究,本次记录涉及到prophet 的公式以及参数调优,从公式可以更直观…...
【git】把本地更改提交远程新分支feature_g
创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...
【C语言练习】080. 使用C语言实现简单的数据库操作
080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...
如何理解 IP 数据报中的 TTL?
目录 前言理解 前言 面试灵魂一问:说说对 IP 数据报中 TTL 的理解?我们都知道,IP 数据报由首部和数据两部分组成,首部又分为两部分:固定部分和可变部分,共占 20 字节,而即将讨论的 TTL 就位于首…...
让回归模型不再被异常值“带跑偏“,MSE和Cauchy损失函数在噪声数据环境下的实战对比
在机器学习的回归分析中,损失函数的选择对模型性能具有决定性影响。均方误差(MSE)作为经典的损失函数,在处理干净数据时表现优异,但在面对包含异常值的噪声数据时,其对大误差的二次惩罚机制往往导致模型参数…...
HDFS分布式存储 zookeeper
hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架,允许使用简单的变成模型跨计算机对大型集群进行分布式处理(1.海量的数据存储 2.海量数据的计算)Hadoop核心组件 hdfs(分布式文件存储系统)&a…...
C++ 设计模式 《小明的奶茶加料风波》
👨🎓 模式名称:装饰器模式(Decorator Pattern) 👦 小明最近上线了校园奶茶配送功能,业务火爆,大家都在加料: 有的同学要加波霸 🟤,有的要加椰果…...
