특정 백분율에서 CSS 진행률을 중지하는 방법은 무엇입니까?

CSS 진행률 원: 중단 비율 제어

CSS를 사용하면 진행률 수준을 시각적으로 나타내는 진행률 원을 만들 수 있습니다. 일반적으로 진행률 표시줄은 100% 완료 시 전체 원을 채웁니다. 그러나 특정 비율에서 진행률을 중지해야 하는 상황이 발생할 수 있습니다.

이를 달성하기 위해 CSS 클리핑과 애니메이션을 활용할 수 있습니다. 바이올린에 제공된 코드를 분석해 보겠습니다.

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

.wrapper 클래스는 진행률 원을 보관할 외부 컨테이너를 정의합니다. 너비와 높이를 100px로 설정하고 절대 위치를 지정합니다. 결정적으로 클립 속성을 적용하여 진행률 표시줄의 절반(직사각형(0px, 100px, 100px, 50px))을 숨깁니다.

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

.wrapper 내에서 . 서클 수업. 녹색 테두리와 둥근 모서리를 사용하여 원하는 크기와 스타일을 지정합니다. 컨테이너의 오른쪽 절반 내에서만 원이 표시되도록 또 다른 중요한 클립 속성이 적용됩니다.

나머지 코드는 CSS 애니메이션 및 데이터 속성을 사용하여 진행률 원의 동작을 제어합니다. 키프레임의 클립 속성을 조정하여 원의 움직임을 특정 비율로 제한할 수 있습니다. 예를 들어 바이올린에서 원은 반 회전을 완료하여 50%에서 멈춥니다.

이러한 기술을 결합하면 애니메이션 루프 없이 완료율을 동적으로 나타내는 CSS 진행 원을 만들 수 있습니다.

위 내용은 특정 백분율에서 CSS 진행률을 중지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!