이해를 돕기 위한 설명
- 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 |
