특정 백분율에서 멈추는 CSS 진행 서클을 만드는 방법은 무엇입니까?

부분 완료 표시가 있는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!