CSS3動態餅狀圖效果

antzone發表於2018-07-03
CSSS3

分享一段程式碼例項，它實現了動態餅狀圖下效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.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>

上面的程式碼實現了我們的要求，更多內容可以參閱相關閱讀。

相關閱讀：

（1）.linear-gradient參閱CSS3 linear-gradient線性漸變一章節。

（2）.border-radius參閱CSS3 border-radius一章節。

（3）.transform-origin參閱CSS3 transform-origin一章節。

（4）.animation參閱CSS3 animation一章節。

相關文章