>웹 프론트엔드 >CSS 튜토리얼 >10분 안에 하나의 div와 CSS만 사용하여 원형 차트를 구현하는 방법을 배우게 됩니다.

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

WBOY
WBOY앞으로
2022-02-06 07:00:372646검색

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

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

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

원형 차트를 구현하기 위해 하나의 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%)

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

10분 안에 하나의 div와 CSS만 사용하여 원형 차트를 구현하는 방법을 배우게 됩니다.테두리 영역만 보이도록 하려면 원의 중간 부분을 숨기는 마스크 속성입니다. 우리는 Radial-Gradient() 메소드를 사용할 것입니다:

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

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

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

10분 안에 하나의 div와 CSS만 사용하여 원형 차트를 구현하는 방법을 배우게 됩니다.우리는 그것을 달성할 수 있습니다 코드 변경:

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

둥근 모서리 추가

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

10분 안에 하나의 div와 CSS만 사용하여 원형 차트를 구현하는 방법을 배우게 됩니다.그림의 (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축 중심이 포함됩니다. 텍스트가 조금 이해하기 어려울 수 있으므로 다음 그림을 통해 이해해 봅시다.

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

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

먼저 변수를 등록합니다:

@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}
}

렌더링:

10분 안에 하나의 div와 CSS만 사용하여 원형 차트를 구현하는 방법을 배우게 됩니다.(동영상 공유 학습:

css 동영상 튜토리얼

)

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

성명:
이 기사는 juejin.im에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제