CSS3 의 애니메이션 효과를 이용하여, 재미있는 응용을 할 수 있는데요.

예를 들면 아래와 같은 코드입니다. 순수 CSS 애니메이션을 이용하여, 시계를 만들어 봤습니다.

참고로, webkit 에서만 동작합니다. (safari, chrome 등)

See the Pen Smart Watch with CSS3 animation by Jèwon Bong (@tehillim) on CodePen.

색상은 Flat UI에서 주로 사용하는 색으로 선별했는데, 금과 유사한 오렌지 색으로 꾸며봤습니다. ㅎㅎ

동작원리는 간단합니다.

먼저는 panel이라는 div를 만들어서 그 안에 다 넣었습니다.

그 안쪽에, 시침, 분침, 초침을 넣고, 가운데에는 Time is gold 라는 문장을 넣었습니다.

그리고, 시계 안쪽으로 한바퀴도는 시간을 생각해보면, 초침은 60초, 분침은 60*60초, 시침은 60*60*12초 라는 계산이 나옵니다.

CSS transform의 rotate 속성을 이용하여, 0도에서 360도로 회전을 시키는 키프레임을 선언하고,

0~360도 회전하는데 소요되는 시간을 animation속성에서 초침,분침,시침에 맞게 적용하면 끝~!

시계니까, 라운드를 주어서 디자인 완성~

일일이, 자바스크립트로, 초침의 위치를 지정하지 않아도, CSS의 애니메이션 속성을 활용하여, 스스로 동작되게 하는 거죠~

무궁무진한 CSS3 하면 할 수록 재미있습니다.

아직 빵 메뉴를 못보셨다면~ 아래 링크도 참고해보세요~^^