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

CSS3实现动画加载效果

news 2026/2/9 3:36:12

<!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

常见源协议介绍

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

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

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

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

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

ES6 class类关键字super

super关键字在 JavaSCript 中，能通过 extends 关键字去继承父类 super 关键字在子类中有以下用法： 当成函数调用 super() 作为 "属性查询" super.prop 和 super[expr] super() super 作为函数调用时，代表父类的构造函数。 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 上构建产品和服务的人员，验证其能否在未来版本中继续运行。红帽 RHEL CI 工程师 Aleksandr…...

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

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

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

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

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

文章目录前言一、考试说明1.考试目标2.考试要求3．考试科目设置二、考试范围考试科目1：计算机与软件工程基本知识1．计算机科学基础2．计算机系统基础知识3．系统开发和运行知识4．网络与信息安全基础知识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键，点击时会出现菜单的问题修复

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

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

【虚拟机栈】

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

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

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

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

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

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

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

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

业务测试常见问题(一)

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

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

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

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

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

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

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

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

Spark 之入门讲解详细版（1）

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室（Algorithms, Machines, and People Lab）开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目，8个月后成为Apache顶级项目，速度之快足见过人之处&…...

编程新知 2026/2/5 4:17:31

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中，我们会遇到使用 java 调用 dll文件的情况，此时大概率出现UnsatisfiedLinkError链接错误，原因可能有如下几种类名错误包名错误方法名参数错误使用 JNI 协议调用，结果 dll 未实现 JNI 协…...

编程新知 2025/10/6 16:38:04

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章，二者共同塑造了现代RESTful API的开发范式。本期就扒一扒其技术演进的关键节点与核心逻辑： 🔄 一、起源与初创期：Swagger的诞生（2010-2014） 核心…...

编程新知 2026/1/25 9:08:41

GitFlow 工作模式（详解）

今天再学项目的过程中遇到使用gitflow模式管理代码，因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式我们在写代码的时候通常会进行网上保存，无论是github还是gittee，都是一种基于git去保存代码的形式，这样保存代码…...

编程新知 2026/1/26 12:37:40

Git常用命令完全指南：从入门到精通

Git常用命令完全指南：从入门到精通一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...

编程新知 2025/10/3 0:40:01

MySQL：分区的基本使用

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

编程新知 2026/2/2 18:52:32

基于开源AI智能名片链动2 + 1模式S2B2C商城小程序的沉浸式体验营销研究

摘要：在消费市场竞争日益激烈的当下，传统体验营销方式存在诸多局限。本文聚焦开源AI智能名片链动2 1模式S2B2C商城小程序，探讨其在沉浸式体验营销中的应用。通过对比传统品鉴、工厂参观等初级体验方式，分析沉浸式体验的优势与价值…...

编程新知 2026/2/2 21:52:42

Vue3学习（接口，泛型，自定义类型，v-for，props）

一，前言继续学习二，TS接口泛型自定义类型 1.接口 TypeScript 接口（Interface）是一种定义对象形状的强大工具，它可以描述对象必须包含的属性、方法和它们的类型。接口不会被编译成 JavaScript 代码，仅…...

编程新知 2025/9/16 22:01:02

Android多媒体——音/视频数据播放（十八）

在媒体数据完成解码并准备好之后，播放流程便进入了最终的呈现阶段。为了确保音视频内容能够顺利输出，系统需要首先对相应的播放设备进行初始化。只有在设备初始化成功后，才能真正开始音视频的同步渲染与播放。这一过程不仅影响播放的启动速度，也直接关系到播放的稳定性和用…...

编程新知 2025/10/30 21:36:57

Ansys Maxwell：线圈和磁体的静磁 3D 分析

本博客展示了如何在 Ansys Maxwell 中执行静磁 3D 分析，以计算载流线圈和永磁体之间相互作用产生的扭矩。在这个例子中，线圈中的电流产生一个沿 Y 轴指向的磁场，而永磁体沿 X 轴被磁化。这种配置导致围绕 Z 轴的扭矩。分步工作流程包括构建几…...

编程新知 2026/2/5 0:24:12

相关文章：