CSS만으로 작성한 AT AT

Anthony Calzadilla 씨가 재밌는 코드를 만들어주셨습니다. CSS만으로 만들어진 AT AT 입니다.
웹킷이나 사파리에서만 동작하는 이 예제는 여러 부분으로 나누고 각 부에 애니메이션과 변형을 주는 방식으로 만들어졌습니다.
예를 들어, 머리는 다음과 같이 작성되었습니다.

[code:css]
@-webkit-keyframes rotate-head{
  0% {-webkit-transform:rotate(0deg) translate(0px,0px);}
  40% {-webkit-transform:rotate(10deg) translate(15px,5px);}
  80% {-webkit-transform:rotate(-5deg) translate(8px,5px);}
  100% {-webkit-transform:rotate(0deg) translate(0px,0px);}
}
#atat #head {
  -webkit-animation-name: rotate-head;
  -webkit-animation-duration: 7s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 0 50%;
}

'[IT] Web Tech' 카테고리의 다른 글

웹 개발 현황 2010 by Web Directions  (2)	2010.04.28
HTML5와 CSS3에 대한 팁과 통찰  (0)	2010.04.27
사우더스의 성능 문제 1타5피  (3)	2010.02.16
Plupload : 아주 멋진 파일 업로드 도구  (0)	2010.02.10
CSS만으로 작성한 AT AT  (0)	2010.02.06
Gordon : 자바스크립트만으로 플래시를 실행한다!  (4)	2010.01.14
제대로 막나가는(?) 프로젝트 - Skulpt  (1)	2009.08.14
iPhone 스타일의 패스워드 입력창 플러그인  (0)	2009.08.06
구글 크롬 이클립스 디버거  (0)	2009.08.06