如何建立一個在特定百分比處停止的 CSS 進度圈？

帶有部分完成指示的CSS 進度圓

簡介：

簡介：

條是一個用於指示進度或完成狀態的通用UI 元素。然而，許多 CSS 進度條顯示達到 100% 的完整動畫。本文示範如何建立一個可以在特定百分比停止的CSS 進度圈，如下圖所示：[部分完成的圓形進度條截圖]

解決方案:

為了實現這一點，我們利用CSS 剪輯和動畫。 Clip 屬性用於隱藏進度圓的一部分，而animation 屬性則定義圓的旋轉。

.wrapper {
  width: 100px;
  height: 100px;
  position: absolute;
  clip: rect(0px, 100px, 100px, 50px);
}

.circle {
  width: 80px;
  height: 80px;
  border: 10px solid green;
  border-radius: 50px;
  position: absolute;
  clip: rect(0px, 50px, 100px, 0px);
}

div[data-anim~=base] {
  -webkit-animation-iteration-count: 1; 
  -webkit-animation-fill-mode: forwards; 
  -webkit-animation-timing-function:linear; 
}

.wrapper[data-anim~=wrapper] {
  -webkit-animation-duration: 0.01s; 
  -webkit-animation-delay: 3s; 
  -webkit-animation-name: close-wrapper; 
}

.circle[data-anim~=left] {
  -webkit-animation-duration: 6s; 
  -webkit-animation-name: left-spin;
}

.circle[data-anim~=right] {
  -webkit-animation-duration: 3s; 
  -webkit-animation-name: right-spin;
}

@-webkit-keyframes right-spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(180deg);
  }
}

@-webkit-keyframes left-spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes close-wrapper {
  to {
    clip: rect(auto, auto, auto, auto);
  }
}

CSS 程式碼：

<div class="wrapper" data-anim="base wrapper">
  <div class="circle" data-anim="base left"></div>
  <div class="circle" data-anim="base right"></div>
</div>

HTML 程式碼：

此解決方案可確保動畫圈可確保動畫圈流暢，並且能夠根據需要以特定百分比暫停。

以上是如何建立一個在特定百分比處停止的 CSS 進度圈？的詳細內容。更多資訊請關注PHP中文網其他相關文章！