호버상의 애니메이션 원형 바

Question

저는 포트폴리오 웹 사이트를 구축하고 있으며 각 스킬을 나타내는 애니메이션 원형 바를 갖춘 스킬 세트 페이지를 구현하려고합니다. 사용자가 마우스를 가져갈 때 원형 주위에 여섯 개의 버튼이 있으며, 마우스를 올리면 순환 막대가 반 시계 방향으로 움직이게됩니다.

설명하기 위해 포토샵에서 .gif를 만들었지 만 도움이되는 튜토리얼을 찾을 수 없습니다.

나는 맨, 애니메이션 파이 차트에서 왼쪽에 유사한 개념을 기능이 웹 사이트를 발견 - Website Example

을 그리고 이것은 내가하려고 무엇 포토샵에서 한 목업 .gif 참고 빠른입니다 달성 - Animated Circular Bar Animation

Answer 1

웹 사이트는 support in modern Browsers 인 HTML5 canvas 요소로 애니메이션을 만들었습니다.

좋은 documentation on MDN과 멋진 tutorial을 찾을 수 있습니다.

또 다른 대안은 이전 브라우저에도 지원되는 Raphaël 일 수 있으며 사용하는 것이 더 간단 할 수 있습니다. this example을 확인하십시오.