10분 안에 하나의 div와 CSS만 사용하여 원형 차트를 구현하는 방법을 배우게 됩니다.

이 기사는 질병 다이어그램을 구현하기 위해 CSS와 함께 div를 사용하는 방법에 대한 몇 가지 관련 질문을 제공합니다.

전체 코드를 보려면 기사 끝으로 스크롤하세요.

원형 차트를 구현하기 위해 하나의 div와 CSS만 사용합니다.

HTMl 구조

<div class="pie" style="--p:60;--b:10px;--c:purple;">60%</div>

몇 가지 CSS 변수를 추가했습니다.

• --p: 진행률 표시줄의 백분율(%가 없는 순수 숫자), 원형 차트 값은 div 콘텐츠(% 포함)와 일치합니다.

• --b: 테두리 두께 값

• --c: 테두리의 기본 색상

이 기사에서는 가독성을 높이기 위해 축약된 변수를 사용합니다. --p -> --percentage, --b -> --border-thickness, --c ->

파이 기본 설정

파이 차트의 기본 스타일을 설정합니다.

.pie {
  --w: 150px; // --w -> --width
  width: var(--w);
  aspect-ratio: 1; // 纵横比，1 说明是正方形
  display: inline-grid;
  place-content: center;
  margin: 5px;
  font-size: 25px;
  font-weight: bold;
  font-family: sans-serif;
}

위에서는 div가 정사각형인지 확인하기 위해 Aspect-ratio: 1;을 사용했습니다. 물론 height: var(--w)를 사용하여 효과를 얻을 수도 있습니다.

다음으로, 간단한 원형 차트를 구현하기 위해 의사 요소를 사용합니다:

.pie:before {
  content: "",
  position: absoute;
  border-radius: 50%;
  inset: 0; // 知识点 1
  background: conic-gradient(var(--c) calc(var(--p)*1%),#0000 0); // 知识点 2
}

Knowledge point 1: inset: 0; top: 0; Bottom: 0; : 원뿔-그라디언트 원뿔 그라디언트, CSS 방법, 추가 내용, #0000 여기서는 투명의 16진수 값입니다.

#0000 Hex Color · 빨간색(0%) · 녹색(0%) · 파란색(0%)

원추형 그라데이션을 적용한 후:

테두리 영역만 보이도록 하려면 원의 중간 부분을 숨기는 마스크 속성입니다. 우리는 Radial-Gradient() 메소드를 사용할 것입니다:

radial-gradient(farthest-side,red calc(99% - var(--b)),blue calc(100% - var(--b)))

위의 코드를 적용한 후, 효과 다이어그램은 다음과 같이 얻을 수 있습니다:

우리의 목표는 다음과 같습니다:

우리는 그것을 달성할 수 있습니다 코드 변경:

<div class="pie"   style="max-width:90%">60%</div>

.pie {
  --w:150px;
  
  width: var(--w);
  aspect-ratio: 1;
  position: relative;
  display: inline-grid;
  place-content: center;
  margin: 5px;
  font-size: 25px;
  font-weight: bold;
  font-family: sans-serif;
}
.pie:before {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: 0;
  background: conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
          mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}

둥근 모서리 추가

둥근 모서리를 추가하는 방법 아래 그림을 보면 이 작은 요령을 이해할 수 있을 것입니다.

그림의 (1) 효과를 위해 원을 시작 가장자리에 배치합니다.

.pie:before {
  background: 
    radial-gradient(farthest-side, var(--c) 98%, #0000) top/var(--b) var(--b) no-repeat,
    conic-gradient(var(--c) calc(var(--p)*1%), #0000 0);
}

그림의 (2) 효과를 위해 원을 끝부분 가장자리에 배치하세요.

.pipe: after {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: calc(50% - var(--b)/2); // 知识点1
  background: var(--c);
  transform: rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2)); // 知识点2
}

지식 1: 위에서도 언급한 삽입: 0; 오른쪽: 0;의 약어입니다.

여기에는 다음이 있습니다.

left = right = 50% - b/2

여기서 요소를 왼쪽과 오른쪽으로 50% 이동했습니다. b/2는 요소 너비가 b인 것과 동일하며 왼쪽과 오른쪽의 중앙에 위치합니다. 높이도 마찬가지입니다.

지식 2: 회전 각도 계산 --

angle = percentage * 360deg / 100

먼저 요소를 해당 각도만큼 회전한 다음 위치를 이동합니다. 여기에는 Y축 중심이 포함됩니다. 텍스트가 조금 이해하기 어려울 수 있으므로 다음 그림을 통해 이해해 봅시다.

애니메이션 추가

지금까지 우리가 구현한 것은 정적 원형 차트입니다. 다음에 애니메이션을 추가하겠습니다.

먼저 변수를 등록합니다:

@property --p {
  syntax: &#39;<number>&#39;;
  inherits: true;
  initial-value: 0;
}

그런 다음 키 프레임을 만듭니다:

@keyframes p {
  from {
    --p: 0
  }
}

참고: 여기서는 from의 --p 값만 설정하면 됩니다. 브라우저는 자동으로 사전 설정 값을 (div class="pie" style="--p:60;">60%

)

마지막으로 애니메이션을 호출합니다.

animation: p 1s .5s both;

안녕하세요~ 아래 코드를 복사해서 사용해 보세요. 물론 사진도 제공합니다.

코드 및 렌더링

<div class="pie" style="--p:20"> 20%</div>
<div class="pie" style="--p:40;--c:darkblue;--b:10px"> 40%</div>
<div class="pie no-round" style="--p:60;--c:purple;--b:15px"> 60%</div>
<div class="pie animate no-round" style="--p:80;--c:orange;"> 80%</div>
<div class="pie animate" style="--p:90;--c:lightgreen"> 90%</div>

@property --p{
  syntax: &#39;<number>&#39;;
  inherits: true;
  initial-value: 1;
}
.pie {
  --p:20;
  --b:22px;
  --c:darkred;
  --w:150px;
  width: var(--w);
  aspect-ratio: 1;
  position: relative;
  display: inline-grid;
  margin: 5px;
  place-content: center;
  font-size: 25px;
  font-weight: bold;
  font-family: sans-serif;
}
.pie:before,
.pie:after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.pie:before {
  inset: 0;
  background:
    radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
    conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
          mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}
.pie:after {
  inset: calc(50% - var(--b)/2);
  background: var(--c);
  transform: rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
}
.animate {
  animation: p 1s .5s both;
}
.no-round:before {
  background-size: 0 0, auto;
}
.no-round:after {
  content: none;
}
@keyframes p{
  from{--p:0}
}

렌더링:

(동영상 공유 학습:

css 동영상 튜토리얼

)

위 내용은 10분 안에 하나의 div와 CSS만 사용하여 원형 차트를 구현하는 방법을 배우게 됩니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!