css - 在 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;
}

那么，这里发生了什么？
悬停时，您的 JavaScriptmargin会将属性设置为 -40px。简单的东西。
因此，在 CSS 中，您需要一个过渡属性，然后在 :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