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

CSS3实现动画加载效果

news 文章来源：https://blog.csdn.net/m0_46219714/article/details/133612130 2025/1/11 12:42:32 
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>加载效果</title><link rel="stylesheet" href="./style.css" /></head><body><!-- 弹跳加载动画 --><div class="bouncing-loader"><div class="bouncing-loader-item"></div><div class="bouncing-loader-item"></div><div class="bouncing-loader-item"></div></div><!-- 旋转加载动画 --><div class="spin-loading"><div class="loading"></div></div><!-- 点点点加载动画 --><span class="dot">正在加载中<span class="dotted"></span></span></body>
</html>

/* style.css */
* {margin: 0;padding: 0;box-sizing: border-box;
}html,
body {display: flex;
}
/* 弹跳加载效果 */
.bouncing-loader,
.spin-loading,
.dot {display: flex;justify-content: center;align-items: center;width: 150px;border: 1px solid #efefef;margin: 3rem;
}
.bouncing-loader-item {width: 16px;height: 16px;margin: 3rem 0.2rem;background-color: #0b16f1;border-radius: 50%;animation: bouncingLoader 0.6s infinite alternate;
}
.bouncing-loader-item:nth-child(2) {animation-delay: 0.2s;
}
.bouncing-loader-item:nth-child(3) {animation-delay: 0.4s;
}
@keyframes bouncingLoader {to {opacity: 0.1;transform: translate3d(0, -10px, 0);}
}/* 旋转动画效果 */
.spin-loading .loading {width: 100%;aspect-ratio: 1;border-radius: 100%;/* 锥形渐变 */background-image: conic-gradient(#0b16f1, 30%, #fff);/* 使用蒙版将中间变为透明 */-webkit-mask-image: radial-gradient(closest-side, transparent 80%, black 80%);/* 开启动画 */animation: spin 1s linear infinite reverse;
}@keyframes spin {from {transform: rotate(0deg);}to {transform: rotate(360deg);}
}
/* ...动画效果 */
.dotted {display: inline-block;width: 20px;
}
.dotted::after {content: '';animation: dotted 2s infinite;
}
@keyframes dotted {0% {content: '...';}25% {content: '';}50% {content: '.';}75% {content: '..';}100% {content: '...';}
}

在这里插入图片描述

相关文章：

CSS3实现动画加载效果

<!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>加载效果</title><link rel"style…...

编程日记 2023/10/9 7:21:31

springboot定时任务Scheduled使用和弊端分析

1.springboot定时任务Scheduled使用说明： （1）创建定时任务类 import com.one.utils.DateUtil; import org.springframework.beans.factory.annotation.Autowired; import...

编程日记 2023/10/9 7:20:31

openGauss学习笔记-93 openGauss 数据库管理-访问外部数据库-oracle_fdw

文章目录 openGauss学习笔记-93 openGauss 数据库管理-访问外部数据库-oracle_fdw93.1 编译oracle_fdw93.2 使用oracle_fdw93.3 常见问题93.4 注意事项 openGauss学习笔记-93 openGauss 数据库管理-访问外部数据库-oracle_fdw openGauss的fdw实现的功能是各个openGauss数据库及…...

编程日记 2023/10/9 7:19:30

【Git】Git下载安装环境配置 下载速度慢的解决方案

这里写自定义目录标题 介绍一、下载官网下载镜像站 二、安装安装成功 三、Git三种界面介绍Git cmd界面展示git bash界面展示git GUI界面展示 四、环境配置配置流程1、打开环境变量界面2、添加环境变量 /删除环境变量3、在变量中找到Git\cmd的值就表示配置成功4、没有找到点击新…...

编程日记 2023/10/9 7:18:29

常见源协议介绍

开源协议&#xff08;Open Source License&#xff09;是一种法律文档&#xff0c;用于规定如何使用、修改和分发开源软件和其他开源项目的规则和条件。这些协议允许创作者或组织将其创造的代码或作品以开放源代码的形式共享给他人&#xff0c;以促进协作、创新和知识共享。常见…...

编程日记 2023/10/9 7:17:28

大数据概述（林子雨慕课课程）

文章目录 1. 大数据概述1.1 大数据概念和影响1.2 大数据的应用1.3 大数据的关键技术1.4 大数据与云计算和物联网的关系云计算物联网 1. 大数据概述 大数据的四大特点&#xff1a;大量化、快速化、多样化、价值密度低 1.1 大数据概念和影响 大数据摩尔定律 大数据由结构化和非…...

编程日记 2023/10/9 7:16:24

ES6 class类关键字super

super关键字 在 JavaSCript 中&#xff0c;能通过 extends 关键字去继承父类 super 关键字在子类中有以下用法&#xff1a; 当成函数调用 super() 作为 "属性查询" super.prop 和 super[expr] super() super 作为函数调用时&#xff0c;代表父类的构造函数。 ES6 要求…...

编程日记 2023/10/9 7:15:22

C++并发与多线程(4) | 传递临时对象作为线程参数的一些问题Ⅰ

一、陷阱1 写一个传递临时对象作为线程参数的示例： #include <iostream> #include <vector> #include <thread> using namespace std;void myprint(const int& i, char* pmybuf) {cout << i << endl;cout << pmybuf << endl;r…...

编程日记 2023/10/9 7:12:16

CentOS Integration SIG 正式成立

导读CentOS 董事会已批准成立 CentOS Integration Special Interest Group (SIG)。该小组旨在帮助那些在 Red Hat Enterprise Linux (RHEL) 或特别是其上游 CentOS Stream 上构建产品和服务的人员&#xff0c;验证其能否在未来版本中继续运行。 红帽 RHEL CI 工程师 Aleksandr…...

编程日记 2023/10/9 7:11:15

智能AI系统源码ChatGPT系统源码+详细搭建部署教程+AI绘画系统+已支持OpenAI GPT全模型+国内AI全模型

一、AI创作系统 SparkAi创作系统是基于OpenAI很火的ChatGPT进行开发的Ai智能问答系统&#xff0c;支持OpenAI GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI创作Chat…...

编程日记 2023/10/9 7:10:14

软考程序员考试大纲（2023）

文章目录 前言一、考试说明1.考试目标2.考试要求3&#xff0e;考试科目设置 二、考试范围考试科目1&#xff1a;计算机与软件工程基本知识1&#xff0e;计算机科学基础2&#xff0e;计算机系统基础知识3&#xff0e;系统开发和运行知识4&#xff0e;网络与信息安全基础知识5&am…...

编程日记 2023/10/9 7:06:07

【重拾C语言】七、指针（一）指针与变量、指针操作、指向指针的指针

目录 前言 七、指针 7.1 指针与变量 7.1.1 指针类型和指针变量 7.1.2 指针所指变量 7.1.3 空指针、无效指针 7.2 指针操作 7.2.1 指针的算术运算 7.2.2 指针的比较 7.2.3 指针的递增和递减 7.3 指向指针的指针 前言 指针是C语言中一个重要的概念正确灵活运用指针 可…...

编程日记 2023/10/9 7:05:06

Kafka源码简要分析

目录 一、生产者的初始化流程 二、生产者到缓冲队列的流程 三、Sender拉取数据到Kafka流程 四、消费者初始化 五、主题订阅原理 六、消费者抓取数据原理 七、消费者组初始化 八、消费者组消费流程 九、提交offset原理 一、生产者的初始化流程 首先获取事务id和客户端…...

编程日记 2023/10/9 7:04:04

react 按住ctrl键，点击时会出现菜单的问题修复

问题描述&#xff1a;我需要按住crtl键&#xff0c;然后鼠标点击后做一些逻辑操作&#xff0c;但是出现如下问题 问题一&#xff1a;按住ctrl键后&#xff0c;点击时不触发click事件&#xff0c;只触发 mousedown和mouseup事件。 问题二&#xff1a;按住ctrl键点击时出现菜单…...

编程日记 2023/10/9 7:03:03

【虚拟机栈】

文章目录 1. 虚拟机栈概述2. 局部变量表(Local Variables)3. 操作数栈4. 动态链接4.1 方法的调用&#xff1a;解析与分配 5. 方法返回地址6. 栈的相关面试题 1. 虚拟机栈概述 每个线程在创建时都会创建一个虚拟机栈&#xff0c;其内部保存一个个的栈帧&#xff08;Stack Frame…...

编程日记 2023/10/9 7:02:02

Linux系列讲解 —— 【fsck】检查并修复Linux文件系统

当文件系统出现损坏时&#xff0c;例如文件无法查看&#xff0c;删除等&#xff0c;可以使用 fsck&#xff08;File System Consistency Check&#xff09;进行修复。但是需要注意fsck在修复时&#xff0c;如果检查出某个文件有问题&#xff0c;可能会向用户请求删除。所以&…...

编程日记 2023/10/9 7:01:01

gitlab突然提示我要输入密码了。

用了很长时间的一个gitlab库&#xff0c;今天提交代码的时候突然提示我输入密码了&#xff0c;并且用户还是gitxx.xx.xx.xx的&#xff0c;瞬间懵逼。 想想原因&#xff0c;可能是因为我不久前设置了本地对另外一个git库的远程访问&#xff0c;用的是ssh&#xff0c;操作过程中可…...

编程日记 2023/10/9 6:59:59

业务测试常见问题(一)

如何多维度的分析一个需求&#xff1f; 功能维度&#xff1a;需求中所描述的功能是否实现&#xff0c;与用户的需求是否一致&#xff0c;是否完整符合用户的需求等。 安全性维度&#xff1a;是否有安全漏洞&#xff0c;是否存在未授权访问漏洞等&#xff0c;以保证系统的安全性…...

编程日记 2023/10/9 6:58:58

IntelliJ IDEA失焦自动重启服务的解决方法

IDEA 热部署特性 热部署&#xff0c;即应用正属于运行状态时&#xff0c;我们对应用源码进行了修改更新&#xff0c;在不重新启动应用的情况下&#xff0c;可以能够自动的把更新的内容重新进行编译并部署到服务器上&#xff0c;使修改立即生效。 现象 在使用 IntelliJ IDEA运…...

编程日记 2023/10/9 6:57:55

终端准入控制系统，保障企业内网安全的关键防线

随着网络技术的不断发展&#xff0c;企业面临的安全威胁也越来越多。终端作为承载企业业务的媒介&#xff0c;对内网资产安全有着重要影响。确保内网终端&#xff08;如PC、BYOD、IoT等&#xff09;能够得到统一管理&#xff0c;对保护内网安全很有必要。终端准入控制作为一种有…...

编程日记 2023/10/9 6:55:52

mysql-执行计划

1. 执行计划表概述 id相同表示加载表的顺序是从上到下。 id不同id值越大&#xff0c;优先级越高&#xff0c;越先被执行。id有相同&#xff0c;也有不同&#xff0c;同时存在。 id相同的可以认为是一组&#xff0c;从上往下顺序执行&#xff1b;在所有的组中&#xff0c;id的值…...

编程日记 2023/10/9 6:54:52

金蝶云星空和旺店通·企业奇门接口打通对接实战

金蝶云星空和旺店通企业奇门接口打通对接实战 接入系统&#xff1a;金蝶云星空 金蝶K/3Cloud&#xff08;金蝶云星空&#xff09;是移动互联网时代的新型ERP&#xff0c;是基于WEB2.0与云技术的新时代企业管理服务平台。金蝶K/3Cloud围绕着“生态、人人、体验”&#xff0c;旨在…...

编程日记 2023/10/9 6:53:50

在服务器上使用nginx改变前端项目请求的url

location /app-dev {rewrite ^/app-dev/(.*) /$1 break;proxy_pass http://152.136.36.251:9999;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr; } location /请求后缀 { rewrite ^/app-dev/(.*) /$1 break; proxy_pass 想要的请求后端的url; …...

编程日记 2023/10/9 6:52:49

【学习笔记】莫比乌斯反演

退役OIer回来受虐啦 一些定义 μ ( x ) { 1 x > 1 ( − 1 ) n x ∏ i 1 n P i 0 o t h e r w i s e \mu(x) \begin{cases} 1 & x > 1 \\ (-1)^n & x \prod _ {i1} ^ {n} P_{i}\\ 0 & otherwise \end{cases} μ(x)⎩ ⎨ ⎧​1(−1)n0​x>1x∏i1n​Pi…...

编程日记 2023/10/9 6:49:45

一款构建Python命令行应用的开源库

1 简介 当我们编写 Python 程序时&#xff0c;我们经常需要与用户进行交互&#xff0c;接收输入并输出结果。Python 提供了许多方法来实现这一点&#xff0c;其中一个非常方便的方法是使用 typer 库。typer 是一个用于构建命令行应用程序的 Python 库&#xff0c;它使得创建命令…...

编程日记 2023/10/9 6:47:44

10-Node.js模块化

01.模块化简介 目标 了解模块化概念和好处&#xff0c;以及 CommonJS 标准语法导出和导入 讲解 在 Node.js 中每个文件都被当做是一个独立的模块&#xff0c;模块内定义的变量和函数都是独立作用域的&#xff0c;因为 Node.js 在执行模块代码时&#xff0c;将使用如下所示的…...

编程日记 2023/10/9 6:44:40

数字IC前端学习笔记：数字乘法器的优化设计（Dadda Tree乘法器）

相关阅读 数字IC前端https://blog.csdn.net/weixin_45791458/category_12173698.html?spm1001.2014.3001.5482 华莱士树仍然是一种比较规则的结构&#xff08;这使得可以方便地生成树的结构&#xff09;&#xff0c;这导致了它所使用的全加器和半加器个数不是最少的&#xff…...

编程日记 2023/10/9 6:43:39

计算机专业毕业设计项目推荐14-文档编辑平台（SpringBoot+Vue+Mysql）

文档编辑平台&#xff08;SpringBootVueMysql&#xff09; **介绍****各部分模块实现** 介绍 本系列(后期可能博主会统一为专栏)博文献给即将毕业的计算机专业同学们,因为博主自身本科和硕士也是科班出生,所以也比较了解计算机专业的毕业设计流程以及模式&#xff0c;在编写的…...

编程日记 2023/10/9 6:40:36

【读书后台管理系统】—后端框架搭建（二）

【读书后台管理系统】—后端框架搭建&#xff08;二&#xff09; 一、 Node 简介 Node 是一个基于 V8 引擎的 Javascript 运行环境&#xff0c;它使得 Javascript 可以运行在服务端&#xff0c;直接与操作系统进行交互&#xff0c;与文件控制、网络交互、进程控制等 Chrome …...

编程日记 2023/10/9 6:39:35

【DLoopDetector（C++）】DBow2词袋模型loop close学习

0.前言 最近读了两篇论文&#xff0c;论文作者开源了一种基于词袋模型DBoW2库的DLoopDetector算法&#xff0c;自己运行demo测试一下 对应论文介绍&#xff1a;Bags of Binary Words for Fast Place Recognition in Image Sequences 开源项目Github地址&#xff1a;https://gi…...

编程日记 2023/10/9 6:38:34

扫码进入网站如何做/广西seo公司

Libvirt-Manager这是一个简单的 Libvirt 虚拟机管理器&#xff0c;使用 PHP 开发。它可以启动、关闭、强制结束或读取虚拟机信息&#xff0c;列出虚拟机列表等。这个项目是为了让开发者管理虚拟机更简单&#xff0c;更轻松。你需要安装 PHP_SSH2 模块来使用此管理器。唔...第一…...

编程日记 2025/1/11 11:55:34

办公网站建设/搜索引擎优化seo多少钱

Java对象的内存布局及堆内存划分前言对象的指向Java内存模型Object objnew Object()占用字节对象的访问句柄访问和直接指针访问对比堆内存Young区Old区名词扫盲一个对象的人生轨迹图总结前言 上一篇我们分析了Java虚拟机方法执行流程及方法重载和方法重写原理&#xff0c;并分…...

编程日记 2025/1/11 11:27:02

网站建设指引/企业网站seo优化外包

VBO与Displaylists的进一步讨论 Posted on 2006-04-21 22:50 panhongwei 阅读(257) 评论(0) 编辑 收藏 所属分类: 大规模地形渲染 之前写的关于VBO与Displaylists的讨论不是很详细&#xff0c;现在重新整理一下&#xff0c;不过需要注意的我的测试结果是在没做view frustum cu…...

编程日记 2025/1/11 6:45:37

phpcms仿行业网站/全网推广公司

一、volatile的定义 Java编程语言允许线程访问共享变量&#xff0c;为了确保共享变量能被准确和一致地更新&#xff0c;线程应该确保通过排他锁单独获得这个变量。Java语言 提供了volatile&#xff0c;在某些情况下比锁要更加方便。如果一个字段被声明成volatile&#xff0c;Ja…...

编程日记 2025/1/11 5:34:10

网站开发案例/外链查询

1. 实现方法 处理器有一个24位的系统定时器&#xff0c;SysTick。该定时器向下计数。计数到0后&#xff0c;重新从STK_LOAD寄存器中重载计数值&#xff0c;继续向下计数。使用SysTick的优点是&#xff0c;不用占用中断和定时器资源。 2. 相关寄存器 STK_CTRL&#xff1a; 0…...

编程日记 2025/1/10 22:58:00

福田蒙派克6座/广州seo网络优化公司

服务器数据恢复故障描述&#xff1a; 这次要为大家介绍的数据恢复案例是一台存储因硬盘出现故障导致的数据丢失。这台存储设备为某常见品牌的DS5300型号存储&#xff0c;存储连接扩展柜。存储的最底层是十几块硬盘组成的几组raid5磁盘阵列。管理员有一天发现了存储的多组raid阵…...

编程日记 2025/1/10 21:34:08