CSS로 원형 차트를 만드는 방법-CSS 튜토리얼-php.cn

CSS로 원형 차트를 만드는 방법

서문:

직장에서 통계 차트, 진행률 표시기, 타이머 등과 같은 원형 차트가 필요할 때가 있습니다. 물론 이를 구현하는 방법은 다양하며 기성품도 있습니다. js 라이브러리를 직접 사용할 수 있습니다. 관심을 끌기 위해 순수 CSS를 사용하여 파이 차트를 직접 구현하고 어떻게 작동하는지 살펴보았습니다.

(추천 영상 튜토리얼:css 영상 튜토리얼)

로그인 후 복사

.pie { width: 100px; height: 100px; border-radius: 50%; background: yellowgreen; background-image: linear-gradient(to right, transparent 50%, #655 0); } .pie::before { content: ''; display: block; margin-left: 50%; height: 100%; border-radius: 0 100% 100% 0/50%; background-color: inherit; transform-origin: left; transform: rotate(.2turn); }

로그인 후 복사

효과:

CSS로 원형 차트를 만드는 방법

회전 각도를 변경하면 다양한 크기의 원형 차트 효과를 얻을 수 있지만, 직접 시도해 본 독자들은 회전이 다음과 같이 된다는 것을 알게 될 것입니다. 50% 위의 내용은 이상적인 효과를 생성하지 않지만 다음과 같은 효과를 생성합니다.

CSS로 원형 차트를 만드는 방법

이 문제를 해결하려면 표시해야 하는 영역이 절반 이상이면 의사 요소의 배경색을 변경합니다. 배경색을 변경해도 괜찮습니다.

아래 저자는 진행률 표시기의 간단한 예를 보여줍니다. 독자들이 직접 시도해 보면 끊임없이 변화하는 원형 차트 효과를 발견하게 될 것입니다.

.pie { width: 100px; height: 100px; border-radius: 50%; background: yellowgreen; background-image: linear-gradient(to right, transparent 50%, #655 0); } .pie::before { content: ''; display: block; margin-left: 50%; height: 100%; border-radius: 0 100% 100% 0/50%; background-color: inherit; transform-origin: left; animation: spin 3s linear infinite,bg 6s step-end infinite; } @keyframes spin{ to{transform: rotate(.5turn);} } @keyframes bg{ 50%{background: #655;} }

로그인 후 복사

효과는 다음과 같습니다.

CSS로 원형 차트를 만드는 방법