SVG와 CSS로 재밌는 놀~이

from Fun with SVG and CSS Animations

Torrey Rick 씨가 Safari 3.1 에 있는 CSS Animation 기능을 이용해서 SVG와 섞어 Fisheye 효과를 만들었다고 합니다. 데모는 여기를 클릭하시면 볼 수 있습니다. 단지 CSS만으로 가능한 거죠.

.dock img {
   width:50px;
   padding:10px;
   float:left;
   position:relative;
   display:block;
   -webkit-transition:width 0.5s ease-out, top 0.2s ease-out;
}

.dock img:hover {
   width:100px;
}
 
.dock img:active {
   top:-40px;
}

.dock img:hover + img {
   width:70px;
}

OS를 새로 설치했더니 Safari가 없어서 확인은 못해봤지만, 아래 답글을 보니 상당히 부드러운가 봅니다. 출근하면 한번 봐야겠군요.

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

"개방형 웹"이 정말로 의미하는 것은?  (0)	2008.04.03
브라우저 희망목록을 위한 의견 모집중  (0)	2008.04.03
성능면에서 바라본 Acid 3  (0)	2008.04.03
GChart 2.0  (0)	2008.04.02
SVG와 CSS로 재밌는 놀~이  (0)	2008.04.02
ECMAScript 4 업데이트 : 새 문법, tail calls 제거  (0)	2008.04.02
jQuery 클래스화 되다?  (0)	2008.04.01
구글, JavaScript 2를 위한 GWT 릴리스  (0)	2008.04.01
구글 닥스 오프라인으로도 사용 가능  (0)	2008.04.01