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

使用CSS制作动态的环形图/饼图

news 2026/2/10 9:00:22

使用纯 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…...

编程日记 2024/3/12 8:19:25

掌握React中的useEffect：函数组件中的魔法钩子

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…...

编程日记 2024/3/12 8:17:23

WPF 窗口添加投影效果Effect

BlurRadius：阴影半径 Color：颜色 Direction：投影方向 ShadowDepth：投影的深度 <Window.Effect><DropShadowEffect BlurRadius"10" Color"#FF858484" Direction"300" ShadowDepth&quo…...

编程日记 2024/3/12 8:16:22

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…...

编程日记 2024/3/12 8:15:21

鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：NavRouter）

导航组件，默认提供点击响应处理，不需要开发者自定义点击事件逻辑。说明： 该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。子组件必须包含两个子组件，其中第二个子组…...

编程日记 2024/3/12 8:14:21

Django环境下使用Ajax

Django环境下使用Ajax 目录 Django环境下使用Ajax介绍前情提要示例JS实现Ajax实现传递JSON格式数据传递文件数据Django自带的序列化组件基于jsonresponse序列化数据基于Django自带的serializers 注册示例介绍 AJAX 的主要目标是在不刷新整个页面的情况下，通过后台…...

编程日记 2024/3/12 8:13:20

官方安装配置要求服务器最低2核4G

官方安装配置要求服务器至少2核、4G。如果服务器低于这个要求，就没有必要安装，因为用户体验超级差。对于服务器CPU来说，建议2到4核就完全足够了，太多就浪费了，但是内存越大越好，最好是4G以上。如果服务器…...

编程日记 2024/3/12 8:12:19

Apache的运用与实战

WEB服务器 1、WEB服务简介 # 目前最主流的三个Web服务器是Apache、Nginx、 IIS。 - WEB服务器一般指网站服务器，可以向浏览器等Web客户端提供网站的访问，让全世界浏览。 - WEB服务器也称为WWW(WORLD WIDE WEB)服务器，主要功能是提供网上信息…...

编程日记 2024/3/12 8:11:18

【漏洞复现】网康NS-ASG应用安全网关 index.php SQL注入漏洞(CVE-2024-2330)

0x01 产品简介网康科技的NS-ASG应用安全网关是一款软硬件一体化的产品，集成了SSL和 IPSecQ，旨在保障业务访问的安全性，适配所有移动终端，提供多种链路均衡和选择技术，支持多种认证方式灵活组合，以及内置短…...

编程日记 2024/3/12 8:10:17

网络基础『序列化与反序列化』

🔭个人主页： 北海 🛜所属专栏： Linux学习之旅、神奇的网络世界 💻操作环境： CentOS 7.6 阿里云远程服务器文章目录 🌤️前言🌦️正文1.协议的重要性2.什么是序列化与反序列化&…...

编程日记 2024/3/12 8:09:15

腾讯云和阿里云4核8G云服务器多少钱一年和1个月费用对比

4核8G云服务器多少钱一年？阿里云ECS服务器u1价格955.58元一年，腾讯云轻量4核8G12M带宽价格是646元15个月，阿腾云atengyun.com整理4核8G云服务器价格表，包括一年费用和1个月收费明细： 云服务器4核8G配置收费价格阿里…...

编程日记 2024/3/12 8:08:13

Git误操作补救错失：恢复误删的本地分支、将某个提交从一个分支复制到另一个分支

一、恢复误删的本地分支作为一枚强迫症，没用的分支总是喜欢及时删删删删掉删掉统统删掉，结果今天发现有些分支还是应该保留。比如，①前段时间切了个分支用来专门做图表，但因为需求还没有最终确定，已经上线了测试服而…...

编程日记 2024/3/12 8:07:12

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…...

编程日记 2024/3/12 8:06:11

Java 学习和实践笔记（34）：对象的转型（casting)

对象的转型（casting)有两种，一种是向上转型，一种是向下转型。向上转型：父类引用指向子类对象。这属于自动类型转换，编译器会自动完成。上一节的多态中，形参为父类Animal, 但是调用时实参为子类对象Dog&…...

编程日记 2024/3/12 8:05:10

【Qt】不透明指针（Opaque Pointer）在Qt源码中的应用

目录什么是不透明指针（Opaque Pointer）不透明指针在Qt代码中的应用Qt中与不透明指针相关的一些宏什么是不透明指针（Opaque Pointer） GeeksforGeeks中给的定义如下： An opaque pointer is a pointer that points to …...

编程日记 2024/3/12 8:03:07

【Python】牛客网—软件开发-Python专项练习

专栏文章索引：Python 1.（单选）下面哪个是Python中不可变的数据结构？ A.set B.list C.tuple D.dict 可变数据类型：列表list[ ]、字典dict{ }、集合set{ }(能查询，也可更改)数据发生改…...

编程日记 2024/3/12 8:02:06

HBase分布式数据库的原理和架构

一、HBase简介 HBase是是一个高性能、高可靠性、面向列的分布式数据库，它是为了在廉价的硬件集群上存储大规模数据而设计的。HBase利用Hadoop HDFS作为其文件存储系统，且Hbase是基于Zookeeper的。二、HBase架构 *图片引用 Hbase采用Master/Slave架构…...

编程日记 2024/3/12 8:01:04

c#类属性与字段例说说

在C#中，类属性（Properties）和字段（Fields）是两种用于存储和访问数据的机制。属性是一种特殊的方法，通过使用get和set访问器来定义，用于读取和写入类的私有字段。属性可以提供对字段的封装&…...

编程日记 2024/3/12 7:59:03

Linux Centos系统磁盘分区和文件系统管理（深入理解）

CSDN 成就一亿技术人！ 作者主页：点击！ Linux专栏：点击！ CSDN 成就一亿技术人！ 前言———— 磁盘在Linux系统中，磁盘是一种用于存储数据的物理设备，可以是传统的硬盘驱动器&am…...

编程日记 2024/3/12 7:58:01

华为配置ISP选路实现报文按运营商转发

CLI举例：配置ISP选路实现报文按运营商转发介绍通过配置ISP选路实现报文按运营商转发的配置举例。组网需求如图1所示，FW作为安全网关部署在网络出口，企业分别从ISP1和ISP2租用一条链路。企业希望访问Server 1的报文从ISP1链路转发&#…...

编程日记 2024/3/12 7:57:00

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。一、环境准备 1、VMware 基于VMware构建Linux虚拟机是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案所以VMware虚拟机方案是必须要学习的。 （1）设置网关打开VMware虚拟机，点击编辑…...

编程新知 2026/1/25 14:43:07

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一，概述 1. 目的将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本：2014.07； Kernel版本：Linux-3.10； 二，Uboot 1. sys_config.fex改动使能uart3(TX:PH00 RX:PH01)，并让boo…...

编程新知 2026/2/5 6:28:09

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件，所以得把软件用docker打包起来，大部分功能都没问题，出了一个奇怪的事情。同样的代码，在本机上用vscode可以运行起来，但是打包之后在docker里出现了问题。使用的是dialog组件，…...

编程新知 2025/9/24 3:05:06

深度学习习题2

1.如果增加神经网络的宽度，精确度会增加到一个特定阈值后，便开始降低。造成这一现象的可能原因是什么？ A、即使增加卷积核的数量，只有少部分的核会被用作预测 B、当卷积核数量增加时，神经网络的预测能力会降低 C、当卷…...

编程新知 2026/1/26 5:53:30

（一）单例模式

一、前言单例模式属于六大创建型模式，即在软件设计过程中，主要关注创建对象的结果，并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计，从而隐藏了类对象的实例是如何被创建的，封装了软件系统使用的具体对象类型。六大创建型模式包括…...

编程新知 2026/1/30 6:03:31

【无标题】湖北理元理律师事务所：债务优化中的生活保障与法律平衡之道

文/法律实务观察组在债务重组领域，专业机构的核心价值不仅在于减轻债务数字，更在于帮助债务人在履行义务的同时维持基本生活尊严。湖北理元理律师事务所的服务实践表明，合法债务优化需同步实现三重平衡： 法律刚性（债…...

编程新知 2026/1/31 9:00:14

WebRTC调研

WebRTC是什么，为什么，如何使用 WebRTC有什么优势 WebRTC Architecture Amazon KVS WebRTC 其它厂商WebRTC 海康门禁WebRTC 海康门禁其他界面整理威视通WebRTC 局域网 Google浏览器 Microsoft Edge 公网 RTSP RTMP NVR ONVIF SIP SRT WebRTC协…...

编程新知 2026/2/7 1:08:45

StarRocks 全面向量化执行引擎深度解析

StarRocks 全面向量化执行引擎深度解析 StarRocks 的向量化执行引擎是其高性能的核心设计，相比传统行式处理引擎（如MySQL），性能可提升 5-10倍。以下是分层拆解： 1. 向量化 vs 传统行式处理维度行式处理向量化处理数…...

编程新知 2025/12/25 15:36:09

C# WPF 左右布局实现学习笔记(1)

开发流程视频： https://www.youtube.com/watch?vCkHyDYeImjY&ab_channelC%23DesignPro Git源码： GitHub - CSharpDesignPro/Page-Navigation-using-MVVM: WPF - Page Navigation using MVVM 1. 新建工程新建WPF应用（.NET Framework) 2.…...

编程新知 2026/2/4 19:09:49

Linux中INADDR_ANY详解

在Linux网络编程中，INADDR_ANY 是一个特殊的IPv4地址常量（定义在 <netinet/in.h> 头文件中），用于表示绑定到所有可用网络接口的地址。它是服务器程序中的常见用法，允许套接字监听所有本地IP地址上的连接请求。关…...

编程新知 2025/11/8 15:35:49