사용자 정의 백분율 정지를 사용하여 CSS 진행 서클을 만드는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

사용자 정의 백분율 정지를 사용하여 CSS 진행 서클을 만드는 방법은 무엇입니까?

Barbara Streisand

풀어 주다： 2024-12-10 02:35:13

원래의

909명이 탐색했습니다.

How to Create a CSS Progress Circle with Custom Percentage Stops?

사용자 정의 백분율 정지가 있는 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 구조

CSS가 준비되면 다음 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>

로그인 후 복사

이 코드는 반원(50%)으로 시작하여 왼쪽은 360도, 오른쪽은 360도 회전하는 진행 원을 생성합니다. 180도.