css - Tumblr 如何为其导航栏链接创建如此平滑的悬停效果？没有 JavaScript 可能吗？

Question

将鼠标悬停在 Tumblr 仪表板上的导航栏链接（例如，文本、照片、引用）上会产生平滑的效果，其中图标上升约 5-10 像素，然后逐渐回到原位，就好像有动画一样。

Tumblr 仪表板：http ://www.tumblr.com/dashboard

在我们的网站上使用纯 CSS 来实现相同的效果（即位置：相对；顶部：-8px）会在图标立即卡回原位时产生不和谐的效果。

有没有办法在没有 JavaScript 的情况下实现这种效果？

谢谢！

Answer 1

他们使用 CSS3 过渡效果 DEMO http://jsfiddle.net/kevinPHPkevin/xejsM/500/

a {
    color:blue;
    /* First we need to help some browsers along for this to work.
     Just because a vendor prefix is there, doesn't mean it will
     work in a browser made by that vendor either, it's just for
     future-proofing purposes I guess. */
    -o-transition:color .2s ease-out, background 2s ease-in;
    -ms-transition:color .2s ease-out, background 2s ease-in;
    -moz-transition:color .2s ease-out, background 2s ease-in;
    -webkit-transition:color .2s ease-out, background 2s ease-in;
    /* ...and now for the proper property */
    transition:color .2s ease-out, background 2s ease-in;
}