&

【HTML】純CSS+DIV實現動態餅狀圖代碼

當前位置：點晴教程→知識管理交流 →『技術文檔交流』

admin

2023年7月26日 11:53 本文熱度 822

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協同辦公管理系統。