使用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制作动态的环形图/饼图

一、构建基础样式

二、设置环形、饼图

三、添加动画

四、解决过渡不生效的问题

完整代码

饼图例子

文本，wangEditor5展示HTML无样式，wangEditor5如何看源码，Ctrl U看CSS文件，代码高亮，Prism.js可以实现，解决方法，参考网页源代码的写法

【简单html静态网页代码】制作一个简单HTML宠物网页（HTML CSS）

CSS字体、行高等其他样式

CSS3新增属性(15个案例代码效果图素材)

基于CSS3媒体查询的响应式旅游网站设计与实现-计算机毕设附源码 12755

如何让CSS只在当前组件中起作用

CSS--解决图片变形的方法

CSS Grid 布局在 IE 中不兼容的原因与解决方案

快速入门CSS

html css基础教程入门篇之CSS 浮动行框和清理

前端哥

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

前端提高篇（102）：jQuery高级方法callbacks、deferred

解决npm install 报错 “npm err code 1“

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

JQuery中的load()、$

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS常用属性（文本属性）

2024-11-04 09:11:111000

3
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

4
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

5
vue使用datav echarts

2024-09-06 00:09:381000

6
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

7
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

8
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

9
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

10
npm的使用

2024-08-18 00:08:131000

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

	.circle {
	...
	background: conic-gradient(transparent 0 0, white 0 90deg, transparent 90deg 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);
	}
	}

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

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

一、构建基础样式

二、设置环形、饼图

三、添加动画

四、解决过渡不生效的问题

完整代码

饼图例子

微信扫一扫：分享