在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中，您需要一个transition属性，并在：hover上更改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