CSS3에서 jQuery 링크 효과 다시 만들기

Question

순수 CSS3의 jQuery에서이 링크 효과를 다시 만드는 법을 아는 사람이 있습니까? 효과는에서 볼 수있다 : http://www.yuhong-ng.com/

Answer 1

동일한 HTML :

<a href="#" id="liveshows" style="margin-top: -40px;"> 
    <span class="top">Live Shows</span> 
    <span class="bottom">Live Shows</span> 
</a> 

같은 기본 CSS :

#navigation li a { 
    height:80px; 
    font-size: 18px; 
    font-family: 'PT Sans Narrow'; 
    font-weight: bold; 
} 
#navigation li,#navigation li a { 
    float: left;  
} 
#navigation li a span { 
    display:block; 
    height:32px; 
    padding:8px 20px 0 20px; 
    cursor:pointer; 
} 

새로운 CSS3 물건 : 그래서

#navigation li a { 
    -webkit-transition: margin-top 500ms linear; 
    -moz-transition: margin-top 500ms linear; 
      transition: margin-top 500ms linear; 
} 

#navigation li a:hover { 
    margin-top: -40px; 
} 

, 무엇을 여기서 일어난거야?
마우스를 올리면 JavaScript가 margin 속성에 -40px의 애니메이션을 적용합니다. 간단한 물건.
CSS에서 전환 속성이 ​​필요하고, 마우스를 올리면 margin을 변경하십시오. 같은 것들.

더 좋은 버전은 칠하기 때문에 3dtransforms를 사용합니다. 이 효과는 페이지에 혼자 있다면 그것은 정말 따라 (다음 margin에 전환하는 것은 괜찮습니다) 또는 웹 사이트 인 경우 "효과가 풍부한"(다음 다시 그리기 추적하고 제거 할 수 있습니다.) 다시 그리기에 대한

#navigation li a { 
    -webkit-transition: -webkit-transform 500ms linear; 
    -moz-transition: -moz-transform 500ms linear; 
      transition: -ms-transform 500ms linear; 
      transition: transform 500ms linear; 
} 

#navigation li a:hover { 
    -webkit-transform: translate3d(0,-40px,0px); 
    -moz-transform: translate3d(0,-40px,0px); 
     -ms-transform: translate3d(0,-40px,0px); 
      transform: translate3d(0,-40px,0px); 
} 

더 (비디오를보아야합니다.) : http://www.youtube.com/watch?v=x0VR3lUOpdc