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가 없어서 확인은 못해봤지만, 아래 답글을 보니 상당히 부드러운가 봅니다. 출근하면 한번 봐야겠군요.
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요