LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

【HTML】纯CSS+DIV实现动态饼状图代码

admin
2023年7月26日 11:53 本文热度 478

CSS 动态饼状图属于前端实例代码,有关更多实例代码大家可以查看

分享一段代码实例,它实现了动态饼状图下效果。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.pipipi.net/" />
<title>前端教程网</title>
<style>
.pie {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: yellowgreen;
  background-image: linear-gradient(to right, transparent 50%, currentColor 0);
  color: #655;
}
  
.pie::before {
  content: '';
  display: block;
  margin-left: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: inherit;
  transform-origin: left;
  animation: spin 3s linear infinite, bg 6s step-end infinite;
}
  
@keyframes spin {
  to { transform: rotate(.5turn); }
}
@keyframes bg {
  50% { background: currentColor; }
}
</style>
</head>
<body>
  <div class="pie"></div>
</body>
</html>

该文章在 2023/7/26 11:56:34 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved