当前位置: 首页 > news >正文

使用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)(附带工程下载连接)

一、温湿度传感器&#xff1a; 温湿度传感器是一种能够检测环境中的温度和湿度&#xff0c;并将其转化为电信号输出的装置。它在智能家居、工业自动化、气象监测、农业等领域有着广泛的应用。 原理&#xff1a; 温湿度传感器通常基于不同的物理原理&#xff0c;以下是一些常见…...

深入理解网络通信: 长连接、短连接与WebSocket

在现代网络应用开发中,选择合适的通信方式对于应用的性能、效率和用户体验至关重要。本文将深入探讨三种常见的网络通信方式:长连接、短连接和WebSocket,分析它们的特点、区别以及适用场景。 1. 短连接 © ivwdcwso (ID: u012172506) 1.1 定义 短连接是指客户端和服务器…...

Linux·环境变量与进程地址空间

1. 命令行参数 各位可能见过main函数也是有参数的&#xff0c;只是我们平时写的代码都比较简单&#xff0c;用不到main函数的参数&#xff0c;下面我们看一下main函数的参数是什么又是怎么用的 我们看这样一段代码 其编译运行后的效果是这样的 我们将main函数后面的那两个参数叫…...

MYSQL 乐观锁

乐观锁是一种用于处理并发控制的策略&#xff0c;特别适用于读多写少的场景。在 MySQL 数据库中&#xff0c;乐观锁通常通过版本号或时间戳来实现。下面将详细介绍乐观锁的概念、实现方式以及在 MySQL 中的应用。 1. 乐观锁的概念 乐观锁的基本思想是&#xff1a;在对数据进行…...

SpringCloud入门(十二)全局过滤器和跨域

一、全局过滤器 全局过滤器的作用也是处理一切进入网关的请求和微服务响应&#xff0c;与GatewayFilter的作用一样。 区别在于GatewayFilter通过配置定义&#xff0c;处理逻辑是固定的&#xff0c;如果我们希望拦截请求&#xff0c;做自己的业务逻辑则没办法实现。而GlobalFilt…...

51单片机系列-按键检测原理

&#x1f308;个人主页&#xff1a;羽晨同学 &#x1f4ab;个人格言:“成为自己未来的主人~” 独立按键是检测低电平的。 下面我们来看一张对应的电路原理图&#xff1a; 在这张图当中&#xff0c;P1&#xff0c;P2&#xff0c;P3内部都上拉了电阻&#xff0c;但是P0没有&am…...

基于元神操作系统实现NTFS文件操作(五)

1. 背景 本文主要介绍$Root元文件的解析。先介绍元文件的构成及各个部分的结构&#xff0c;然后结合上一篇博文中读取到的元文件内容&#xff0c;对测试磁盘中目标分区的根目录进行展示。 2. $Root元文件解析 &#xff08;1&#xff09;$Root元文件的结构 $Root元文件由两部…...

AutoCAD学习

AutoCAD学习 最基本操作 命令用途说明空格键确认键也可以是重复刚才的命令回车键也是确认键鼠标右键也可以选择确认LINE、L直线命令绘制直线DLI线性尺寸标注DIMLINEAR鼠标滚轮滚动放大缩小视图界面鼠标中键按住移动视图DAL对齐线性标注DIMALIGNED F8 正交模式ORTHOMODE Tab 切换…...

go的一些知识点

一.package 1.新建项目 新建一个itying文件夹&#xff0c;在里面使用命令 就能生成一个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

主要的功能就是将文本转为语音&#xff0c;可以播放。 看了看官方提供的demo&#xff0c;嗯....没看懂。最后还是去网上找的。 网上提供的案例&#xff0c;很多都是有局限性的&#xff0c;我找的那个他只能读取第一段数据&#xff0c;剩下的不读取。 科大讯飞的接口&#xf…...

缺省参数

一、概念 在声明或定义函数时为函数的参数指定一个默认值&#xff0c;调用时&#xff0c;如果对应参数没有传参&#xff0c;则使用其默认值&#xff0c;否则使用指定的实参 void TestFunc(int a 0) {cout<<a<<endl; }int main() {TestFunc(); // 没有传参&am…...

Stable Diffusion绘画 | 来训练属于自己的模型:炼丹启动

经过前面几轮辛苦的准备工作之后&#xff0c;现在开始进入终篇的炼丹环节。 在「上传素材」页面&#xff0c;点击「开始训练」&#xff1a; 可以在「查看进度-进度」中&#xff0c;查看模型训练的整体进度&#xff1a; 求助&#xff01;&#xff01;&#xff01;操作「开始训练…...

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方法一先序遍历方法二 连通分量是极大连通子图 一个连通图的生成树是一个极小连通子图 无向图的邻接表中&#xff0c;第i个顶点的度为第i个链表中的结点数 邻接表和邻接矩阵对不同的操作各有优势。 最短路径算法: 单源最短路径 已知图G(V,E)&#xff0c;我们…...

浅谈汽车智能座舱如何实现多通道音频

一、引言 随着汽车智能座舱的功能迭代发展&#xff0c;传统的 4 通道、6 通道、8 通道等音响系统难以在满足驾驶场景的需求&#xff0c;未来对于智能座舱音频质量和通道数会越来越高。接下来本文将浅析目前智能座舱如何实现音频功放&#xff0c;以及如何实现多路音频功放方案。…...

系统架构设计师教程 第13章 13.1层次式体系结构概述 笔记

13.1 层次式体系结构概述 分层式体系结构是一种最常见的架构设计方法&#xff0c;能有效地使设计简化&#xff0c;使设计的系统机构清晰&#xff0c;便于提高复用能力和产品维护能力。 层次式体系结构设计是将系统组成一个层次结构&#xff0c;每一层为上层服务&#xff0c;并…...

cnn突破一(先搞定三层反馈神经网络bpnet,c#实现)

惦记cnn很久了&#xff0c;一直搞机器视觉&#xff0c;走不出来&#xff0c;现在megauging已经实现&#xff0c;说明书也写了不少&#xff0c;该突破的突破了&#xff0c;该改进的也改进了&#xff0c;一个心病治好了&#xff0c;有空把人工智能在机器视觉上的延伸&#xff0c;…...

如何创建一个docker,给它命名,且下次重新打开它

1.创建一个新的docker并同时命名 docker run -it --name one ubuntu:18.04 /bin/bash 这时候我们已经创建了一个docker,并且命名为"one" 2.关闭当前docker exit 3.这时docker已经终止了&#xff0c;我们需要使用它要重新启动 docker start one 4.现在可以重新打…...

【D3.js in Action 3 精译_025】3.4 让 D3 数据适应屏幕(中)—— 线性比例尺的用法

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第一部分 D3.js 基础知识 第一章 D3.js 简介&#xff08;已完结&#xff09; 1.1 何为 D3.js&#xff1f;1.2 D3 生态系统——入门须知1.3 数据可视化最佳实践&#xff08;上&#xff09;1.3 数据可…...

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...

毫米波雷达基础理论(3D+4D)

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文&#xff1a; 一文入门汽车毫米波雷达基本原理 &#xff1a;https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...

MySQL:分区的基本使用

目录 一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区 一、什么是分区 MySQL 分区&#xff08;Partitioning&#xff09;是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分&#xff08;分区&#xff09;可以独立存储、管理和优化&#xff0c;…...

Spring AI Chat Memory 实战指南:Local 与 JDBC 存储集成

一个面向 Java 开发者的 Sring-Ai 示例工程项目&#xff0c;该项目是一个 Spring AI 快速入门的样例工程项目&#xff0c;旨在通过一些小的案例展示 Spring AI 框架的核心功能和使用方法。 项目采用模块化设计&#xff0c;每个模块都专注于特定的功能领域&#xff0c;便于学习和…...

springboot 日志类切面,接口成功记录日志,失败不记录

springboot 日志类切面&#xff0c;接口成功记录日志&#xff0c;失败不记录 自定义一个注解方法 import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;/***…...