See the Pen [HTML/CSS]원형 차트 만들기 by TytanLee (@TytanLee) on CodePen.
이해를 돕기 위한 설명
- `stroke`클래스를 `rotate`로 돌렸기 때문에 HTML내의 `circle`에서 `cx`,`cy`로 위치 조정, 그리고 `r`로 차트의 반지름 설정
- `stroke-dasharray`는 점의 길이, `stroke-dashoffset`은 점 사이 간격의 길이
- `show_circle` 애니메이션으로 차트가 움직이는 모습 구현
- `storke`클래스의 `stroke-dasharray`와 `show_circle`애니메이션의 `stroke-dashoffset`의 값을 조정해 차트가 얼마
나 찰 것인지 조정
- `storke`클래스의 `stroke-dasharray` 값이 내려가면 애니메이션의 `stroke-dashoffset`값도 같이 내려가야하는데 값이 일정하지 않기때문에 개발자도구에서 조정하면서 값을 맞춰야한다.
'🧑💻개발 > 아카이브' 카테고리의 다른 글
| [HTML/CSS]마우스 오버 효과(plus-ex사이트) (0) | 2023.10.10 |
|---|---|
| [유용한 사이트]iOS 디바이스 정보를 모두 확인할 수 있는 사이트 (0) | 2023.09.19 |
| [CSS]노이즈 이펙트를 활용한 분위기 연출 (0) | 2023.09.12 |
| [CSS]마우스 오버시 아이콘 등장 효과 (0) | 2023.07.21 |
| [JavaScript] 최소한의 코드로 D-Day 계산하기 (0) | 2023.07.13 |
