使用CSS制作动态的环形图/饼图
使用纯 CSS + Animation + conic-gradient 实现一个环形图。
饼图的实现思路和环形图一样,去掉中间的圆形遮盖 after 伪类元素即可。
一、构建基础样式
构建圆形节点和中间的遮盖元素。
<style>body {background-color: rgb(130, 226, 255);}.circle {top: 160px;left: 160px;width: 300px;aspect-ratio: 1;border: 1px solid white;border-radius: 50%;position: relative;&::after {content: "";position: absolute;top: 7px;left: 7px;width: 286px;height: 286px;border-radius: 50%;background: rgb(0, 183, 255);display: block;box-sizing: border-box;}}
</style><body><div class="circle"></div>
</body>

二、设置环形、饼图
设置锥形渐变,设置三个颜色(transparent,white,transparent),方便后边通过动画动态调整
.circle {...background: conic-gradient(transparent 0 0, white 0 90deg, transparent 90deg 360deg);&::after {...}
}

三、添加动画
添加动画前,将 background 重置一下
.circle {...background: conic-gradient(transparent 0 0, white 0 0, transparent 0 360deg);&::after {...}
}

然后添加动画
.circle {...animation: rotated 10s linear infinite;&::after {...}
}
@keyframes rotated {0% {background: conic-gradient(transparent 0 0, white 0 0, transparent 0 360deg);}12% {background: conic-gradient(transparent 0 0, white 0 90deg, transparent 90deg 360deg);}25% {background: conic-gradient(transparent 0 90deg, white 90deg 90deg, transparent 90deg 360deg);}37% {background: conic-gradient(transparent 0 90deg, white 90deg 180deg, transparent 180deg 360deg);}50% {background: conic-gradient(transparent 0 180deg, white 180deg 180deg, transparent 180deg 360deg);}62% {background: conic-gradient(transparent 0 180deg, white 180deg 270deg, transparent 270deg 360deg);}75% {background: conic-gradient(transparent 0 270deg, white 270deg 270deg, transparent 270deg 360deg);}87% {background: conic-gradient(transparent 0 270deg, white 270deg 360deg, transparent 360deg 360deg);}100% {background: conic-gradient(transparent 0 360deg, white 360deg 360deg, transparent 360deg 360deg);}
}

可以看到,为渐变gradient的元素设置animation、transition是不会有过渡的效果。这是由于gradient属性并不像width这类型的属性一样,无法通过gradient的变化实现过渡效果。
四、解决过渡不生效的问题
使用 @property 自定义属性,在 gradient 各个颜色的起始、结束角度上使用。
重新调整 @keyframes 中变化的属性,不改变 gradient,而是改变我们自定义的 angle 属性。
CSS变量和@property-CSDN博客
<style>body {...}@property --angle1 {syntax: '<angle>';initial-value: 0deg;inherits: false;}@property --angle2 {syntax: '<angle>';initial-value: 0deg;inherits: false;}.circle {...background: conic-gradient(transparent 0 var(--angle1), white var(--angle1) var(--angle2), transparent var(--angle2) 360deg);...&::after {...}}@keyframes rotated {0% {--angle1: 0deg;--angle2: 0deg;/* background: conic-gradient(transparent 0 0, white 0 0, transparent 0 360deg); */}12% {--angle1: 0deg;--angle2: 90deg;/* background: conic-gradient(transparent 0 0, white 0 90deg, transparent 90deg 360deg); */}25% {--angle1: 90deg;--angle2: 90deg;/* background: conic-gradient(transparent 0 90deg, white 90deg 90deg, transparent 90deg 360deg); */}37% {--angle1: 90deg;--angle2: 180deg;/* background: conic-gradient(transparent 0 90deg, white 90deg 180deg, transparent 180deg 360deg); */}50% {--angle1: 180deg;--angle2: 180deg;/* background: conic-gradient(transparent 0 180deg, white 180deg 180deg, transparent 180deg 360deg); */}62% {--angle1: 180deg;--angle2: 270deg;/* background: conic-gradient(transparent 0 180deg, white 180deg 270deg, transparent 270deg 360deg); */}75% {--angle1: 270deg;--angle2: 270deg;/* background: conic-gradient(transparent 0 270deg, white 270deg 270deg, transparent 270deg 360deg); */}87% {--angle1: 270deg;--angle2: 360deg;/* background: conic-gradient(transparent 0 270deg, white 270deg 360deg, transparent 360deg 360deg); */}100% {--angle1: 360deg;--angle2: 360deg;/* background: conic-gradient(transparent 0 360deg, white 360deg 360deg, transparent 360deg 360deg); */}}
</style>

完整代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>body {background-color: rgb(130, 226, 255);}@property --angle1 {syntax: "<angle>";initial-value: 0deg;inherits: false;}@property --angle2 {syntax: "<angle>";initial-value: 0deg;inherits: false;}.circle {top: 160px;left: 160px;width: 300px;aspect-ratio: 1;border-radius: 50%;position: relative;background: conic-gradient(transparent 0 var(--angle1), white var(--angle1) var(--angle2), transparent var(--angle2) 360deg);animation: rotated 10s linear infinite;&::after {content: "";position: absolute;top: 7px;left: 7px;width: 286px;height: 286px;border-radius: 50%;background: rgb(0, 183, 255);display: block;box-sizing: border-box;}}@keyframes rotated {0% {--angle1: 0deg;--angle2: 0deg;/* background: conic-gradient(transparent 0 0, white 0 0, transparent 0 360deg); */}12% {--angle1: 0deg;--angle2: 90deg;/* background: conic-gradient(transparent 0 0, white 0 90deg, transparent 90deg 360deg); */}25% {--angle1: 90deg;--angle2: 90deg;/* background: conic-gradient(transparent 0 90deg, white 90deg 90deg, transparent 90deg 360deg); */}37% {--angle1: 90deg;--angle2: 180deg;/* background: conic-gradient(transparent 0 90deg, white 90deg 180deg, transparent 180deg 360deg); */}50% {--angle1: 180deg;--angle2: 180deg;/* background: conic-gradient(transparent 0 180deg, white 180deg 180deg, transparent 180deg 360deg); */}62% {--angle1: 180deg;--angle2: 270deg;/* background: conic-gradient(transparent 0 180deg, white 180deg 270deg, transparent 270deg 360deg); */}75% {--angle1: 270deg;--angle2: 270deg;/* background: conic-gradient(transparent 0 270deg, white 270deg 270deg, transparent 270deg 360deg); */}87% {--angle1: 270deg;--angle2: 360deg;/* background: conic-gradient(transparent 0 270deg, white 270deg 360deg, transparent 360deg 360deg); */}100% {--angle1: 360deg;--angle2: 360deg;/* background: conic-gradient(transparent 0 360deg, white 360deg 360deg, transparent 360deg 360deg); */}}</style></head><body><div class="circle"></div></body>
</html>
饼图例子
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>body {background-color: rgb(130, 226, 255);}@property --angle {syntax: "<angle>";initial-value: 0deg;inherits: false;}.circle {top: 160px;left: 160px;width: 300px;aspect-ratio: 1;border: 1px solid white;border-radius: 50%;position: relative;background: conic-gradient(white 0 var(--angle), transparent var(--angle) 360deg);transition: --angle 0.5s linear;&:hover {--angle: 360deg;}}</style></head><body><div class="circle"></div></body>
</html>

GIF 略显卡顿🤣🤣
相关文章:
使用CSS制作动态的环形图/饼图
使用纯 CSS Animation conic-gradient 实现一个环形图。 饼图的实现思路和环形图一样,去掉中间的圆形遮盖 after 伪类元素即可。 一、构建基础样式 构建圆形节点和中间的遮盖元素。 <style>body {background-color: rgb(130, 226, 255);}.circle {top: 16…...
掌握React中的useEffect:函数组件中的魔法钩子
🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…...
WPF 窗口添加投影效果Effect
BlurRadius:阴影半径 Color:颜色 Direction:投影方向 ShadowDepth:投影的深度 <Window.Effect><DropShadowEffect BlurRadius"10" Color"#FF858484" Direction"300" ShadowDepth&quo…...
Gitlab CICD 下载artifacts文件并用allure打开,或bat文件打开
allure命令行打开aritfacts报告 首先下载allure.zip,并解压 配置环境变量 使用命令行打开allure文件夹 allure open 2024-03-11-14-54-40 2024-03-11-14-54-40 包含index.html Bat文件打开artifacts There are 2 html reports in the download artifacts.zip S…...
鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:NavRouter)
导航组件,默认提供点击响应处理,不需要开发者自定义点击事件逻辑。 说明: 该组件从API Version 9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 子组件 必须包含两个子组件,其中第二个子组…...
Django环境下使用Ajax
Django环境下使用Ajax 目录 Django环境下使用Ajax介绍前情提要示例JS实现Ajax实现 传递JSON格式数据传递文件数据Django自带的序列化组件基于jsonresponse序列化数据基于Django自带的serializers 注册示例 介绍 AJAX 的主要目标是在不刷新整个页面的情况下,通过后台…...
官方安装配置要求服务器最低2核4G
官方安装配置要求服务器至少2核、4G。 如果服务器低于这个要求,就没有必要安装,因为用户体验超级差。 对于服务器CPU来说,建议2到4核就完全足够了,太多就浪费了,但是内存越大越好,最好是4G以上。 如果服务器…...
Apache的运用与实战
WEB服务器 1、WEB服务简介 # 目前最主流的三个Web服务器是Apache、Nginx、 IIS。 - WEB服务器一般指网站服务器,可以向浏览器等Web客户端提供网站的访问,让全世界浏览。 - WEB服务器也称为WWW(WORLD WIDE WEB)服务器,主要功能是提供网上信息…...
【漏洞复现】网康NS-ASG应用安全网关 index.php SQL注入漏洞(CVE-2024-2330)
0x01 产品简介 网康科技的NS-ASG应用安全网关是一款软硬件一体化的产品,集成了SSL和 IPSecQ,旨在保障业务访问的安全性,适配所有移动终端,提供多种链路均衡和选择技术,支持多种认证方式灵活组合,以及内置短…...
网络基础『 序列化与反序列化』
🔭个人主页: 北 海 🛜所属专栏: Linux学习之旅、神奇的网络世界 💻操作环境: CentOS 7.6 阿里云远程服务器 文章目录 🌤️前言🌦️正文1.协议的重要性2.什么是序列化与反序列化&…...
腾讯云和阿里云4核8G云服务器多少钱一年和1个月费用对比
4核8G云服务器多少钱一年?阿里云ECS服务器u1价格955.58元一年,腾讯云轻量4核8G12M带宽价格是646元15个月,阿腾云atengyun.com整理4核8G云服务器价格表,包括一年费用和1个月收费明细: 云服务器4核8G配置收费价格 阿里…...
Git误操作补救错失:恢复误删的本地分支、将某个提交从一个分支复制到另一个分支
一、恢复误删的本地分支 作为一枚强迫症,没用的分支总是喜欢及时删删删删掉删掉统统删掉,结果今天发现有些分支还是应该保留。 比如,①前段时间切了个分支用来专门做图表,但因为需求还没有最终确定,已经上线了测试服而…...
MySQL系列-分析SQL性能
查找慢SQL MySQL 慢查询日志是用来记录 MySQL 在执行命令中,响应时间超过预设阈值的 SQL 语句。 开启慢查询 # 开启慢查询日志功能 SET GLOBAL slow_query_log ON; # 慢查询日志存放位置 SET GLOBAL slow_query_log_file /var/lib/mysql/ranking-list-slow.log…...
Java 学习和实践笔记(34):对象的转型(casting)
对象的转型(casting)有两种,一种是向上转型,一种是向下转型。 向上转型:父类引用指向子类对象。这属于自动类型转换,编译器会自动完成。 上一节的多态中,形参为父类Animal, 但是调用时实参为子类对象Dog&…...
【Qt】不透明指针(Opaque Pointer)在Qt源码中的应用
目录 什么是不透明指针(Opaque Pointer)不透明指针在Qt代码中的应用Qt中与不透明指针相关的一些宏 什么是不透明指针(Opaque Pointer) GeeksforGeeks中给的定义如下: An opaque pointer is a pointer that points to …...
【Python】牛客网—软件开发-Python专项练习
专栏文章索引:Python 1.(单选)下面哪个是Python中不可变的数据结构? A.set B.list C.tuple D.dict 可变数据类型:列表list[ ]、字典dict{ }、集合set{ }(能查询,也可更改)数据发生改…...
HBase分布式数据库的原理和架构
一、HBase简介 HBase是是一个高性能、高可靠性、面向列的分布式数据库,它是为了在廉价的硬件集群上存储大规模数据而设计的。HBase利用Hadoop HDFS作为其文件存储系统,且Hbase是基于Zookeeper的。 二、HBase架构 *图片引用 Hbase采用Master/Slave架构…...
c#类属性与字段例说说
在C#中,类属性(Properties)和字段(Fields)是两种用于存储和访问数据的机制。 属性是一种特殊的方法,通过使用get和set访问器来定义,用于读取和写入类的私有字段。属性可以提供对字段的封装&…...
Linux Centos系统 磁盘分区和文件系统管理 (深入理解)
CSDN 成就一亿技术人! 作者主页:点击! Linux专栏:点击! CSDN 成就一亿技术人! 前言———— 磁盘 在Linux系统中,磁盘是一种用于存储数据的物理设备,可以是传统的硬盘驱动器&am…...
华为配置ISP选路实现报文按运营商转发
CLI举例:配置ISP选路实现报文按运营商转发 介绍通过配置ISP选路实现报文按运营商转发的配置举例。 组网需求 如图1所示,FW作为安全网关部署在网络出口,企业分别从ISP1和ISP2租用一条链路。 企业希望访问Server 1的报文从ISP1链路转发&#…...
el-switch文字内置
el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...
1.3 VSCode安装与环境配置
进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件,然后打开终端,进入下载文件夹,键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...
数据链路层的主要功能是什么
数据链路层(OSI模型第2层)的核心功能是在相邻网络节点(如交换机、主机)间提供可靠的数据帧传输服务,主要职责包括: 🔑 核心功能详解: 帧封装与解封装 封装: 将网络层下发…...
拉力测试cuda pytorch 把 4070显卡拉满
import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试,通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小,增大可提高计算复杂度duration: 测试持续时间(秒&…...
JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作
一、上下文切换 即使单核CPU也可以进行多线程执行代码,CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短,所以CPU会不断地切换线程执行,从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...
Map相关知识
数据结构 二叉树 二叉树,顾名思义,每个节点最多有两个“叉”,也就是两个子节点,分别是左子 节点和右子节点。不过,二叉树并不要求每个节点都有两个子节点,有的节点只 有左子节点,有的节点只有…...
Element Plus 表单(el-form)中关于正整数输入的校验规则
目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入(联动)2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...
3-11单元格区域边界定位(End属性)学习笔记
返回一个Range 对象,只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意:它移动的位置必须是相连的有内容的单元格…...
6个月Python学习计划 Day 16 - 面向对象编程(OOP)基础
第三周 Day 3 🎯 今日目标 理解类(class)和对象(object)的关系学会定义类的属性、方法和构造函数(init)掌握对象的创建与使用初识封装、继承和多态的基本概念(预告) &a…...
解析两阶段提交与三阶段提交的核心差异及MySQL实现方案
引言 在分布式系统的事务处理中,如何保障跨节点数据操作的一致性始终是核心挑战。经典的两阶段提交协议(2PC)通过准备阶段与提交阶段的协调机制,以同步决策模式确保事务原子性。其改进版本三阶段提交协议(3PC…...
