CSS/CSS 응용
[CSS]CSS만을 이용해서 차트 그리기
알찬 퍼블리셔
2019. 5. 24. 10:24
728x90
반응형
[CSS] - [CSS]그라디언트를 이용해 간단하게 원형차트/도넛차트 그리기(애니메이션으로 차트그리기 )
이전에 그라디언트를 이용해 원형 차트를 그렸었다.
이건 원형으로 그릴 수 있지만,
애니메이션 효과를 내기위해서는 스크립트를 이용해야한다..
그럼 완전 CSS만을 이용해서 차트를 그릴 수도 있다.
하지만 반원만 가능하다..
그려진 반원을 영역밖에 두었다가 rotateZ를 이용해 돌려서 그려지는 것처럼 보이기 때문이다.
.chart-skills 의 overflow : hidden을 지워보면 어떻게 움직이는지 알 수 있다.
728x90
반응형