首頁 > web前端 > css教學 > 如何建立僅 CSS 的進度指示器並在特定百分比處停止?

如何建立僅 CSS 的進度指示器並在特定百分比處停止?

Susan Sarandon
發布: 2024-12-14 03:14:14
原創
544 人瀏覽過

How Can I Create a CSS-Only Progress Indicator That Stops at a Specific Percentage?

僅使用CSS 在特定百分比停止的進度指示器

您已在此網站上搜尋過進度條,但您搜尋過的進度條我們發現所有的動畫圈都達到了100%。但是,您有興趣建立一個在特定百分比處停止的進度條,如下面的螢幕截圖中顯示的那樣。

要只使用 CSS 來實現此效果,您可以結合使用剪輯和動畫技術。以下面的小提琴為例:

.wrapper {
  width: 100px; /* Set the size of the progress bar */
  height: 100px;
  position: absolute; /* Enable clipping */
  clip: rect(0px, 100px, 100px, 50px); /* Hide half of the progress bar */
}
/* Set the sizes of the elements that make up the progress bar */
.circle {
  width: 80px;
  height: 80px;
  border: 10px solid green;
  border-radius: 50px;
  position: absolute;
  clip: rect(0px, 50px, 100px, 0px);
}
/* Using the data attributes for the animation selectors. */
/* Base settings for all animated elements */
div[data-anim~=base] {
  -webkit-animation-iteration-count: 1;  /* Only run once */
  -webkit-animation-fill-mode: forwards; /* Hold the last keyframe */
  -webkit-animation-timing-function:linear; /* Linear animation */
}

.wrapper[data-anim~=wrapper] {
  -webkit-animation-duration: 0.01s; /* Complete keyframes asap */
  -webkit-animation-delay: 3s; /* Wait half of the animation */
  -webkit-animation-name: close-wrapper; /* Keyframes name */
}

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

.circle[data-anim~=right] {
  -webkit-animation-duration: 3s; /* Half animation time */
  -webkit-animation-name: right-spin;
}
/* Rotate the right side of the progress bar from 0 to 180 degrees */
@-webkit-keyframes right-spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(180deg);
  }
}
/* Rotate the left side of the progress bar from 0 to 360 degrees */
@-webkit-keyframes left-spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
/* Set the wrapper clip to auto, effectively removing the clip */
@-webkit-keyframes close-wrapper {
  to {
    clip: rect(auto, auto, auto, auto);
  }
}
登入後複製
<div class="wrapper" data-anim="base wrapper">
  <div class="circle" data-anim="base left"></div>
  <div class="circle" data-anim="base right"></div>
</div>
登入後複製

在此小提琴中,採用剪裁、圓形元素和動畫的組合來創造所需的效果。透過使用 Clip 屬性隱藏一半進度條,然後對圓形元素的不同部分進行動畫旋轉,就可以實現在特定百分比處停止的進度條。

以上是如何建立僅 CSS 的進度指示器並在特定百分比處停止?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板