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

Question

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

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

在我们的网站上使用纯 CSS 实现相同的效果(即position:relative；顶部:-8 像素)会在图标立即恢复原位时产生不和谐的效果。

有没有办法不用 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;
}