特定のパーセンテージで停止する CSS プログレスサークルを作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

特定のパーセンテージで停止する CSS プログレスサークルを作成するにはどうすればよいですか?

DDD

リリース： 2024-12-16 22:35:10

オリジナル

312 人が閲覧しました

How to Create a CSS Progress Circle that Stops at Specific Percentages?

部分的な完了を示す CSS 進行状況サークル

概要:

円形の進行状況バーは、進行状況または完了ステータスを示すために使用される共通の UI 要素。ただし、多くの CSS プログレスバーでは、100% に達する完全なアニメーションが表示されます。この記事では、以下のスクリーンショットに示すように、特定のパーセンテージで停止できる CSS 進行状況円を作成する方法を説明します。

[部分的に完了した円形進行状況バーのスクリーンショット]

解決策:

これを実現するために、CSS クリッピングとアニメーションを利用します。クリッププロパティは進行状況の円の一部を非表示にするために使用され、アニメーションプロパティは円の回転を定義します。

CSS コード:

.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);
  }
}

ログイン後にコピー

HTML コード:

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

ログイン後にコピー

このソリューションにより、進行状況の円が確実にアニメーション化されます。スムーズに、必要に応じて特定の割合で一時停止する機能も備えています。

以上が特定のパーセンテージで停止する CSS プログレスサークルを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。