Question

这是我的网站：http://adamshort2.hostoi.com/index.html

正如您可以看到当您将鼠标悬停在导航链接上时，它会在列表元素周围显示“功能区”样式的白色框。我想要的是从顶部（动画）向下滑动而不是仅仅出现。如果可能的话，只需坚持使用CSS，但如果需要，我不介意Javascript / Jquery。

Answer 1

这可以使用纯CSS完成。您不能单独使用<a>，因为您需要在背景设置动画时将文本保留在原来的位置。可以改变背景位置，但我选择使用另一个元素（特别是伪元素）。

#nav a {
    /* required to keep absolute background on top */
    z-index: 1;
    /* required to keep text on top of absolute bg */
    position: relative;
    /* not mandatory; makes it look better when animating out
    because during that time it will be white on white */
    transition: color 1s;
}

#nav li a:before {
    background-color: #FFF;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    display: block;
    width: 100%;
    height: 100%;
    /* element will not appear without this */
    content: " ";
    position: absolute;
    /* height of the <a> so bg is off screen */
    top: -175px;
    left: 0;
    transition: top 1s;
    /* text will appear above bg */
    z-index: -1;
}
#nav li a:hover {
    color: red;
}
#nav li a:hover:before {
    top: 0px;
}

工作演示：http://jsfiddle.net/cLsue/

Answer 2

CSS“transition”属性应该适合您作为纯CSS解决方案的需求，只要您不关心与旧版浏览器的兼容性。

以下是2个涵盖CSS过渡的快速链接。

Answer 3

如果我可以提出建议：

在这种情况下，最好利用CSS3的translate3d，因为它是硬件加速的，而使用left属性的动画不是硬件加速的。

有很多文章记录了比较两者时性能的提高。例如：http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

以下是使用Explosion Pill示例实现动画的方法：

#nav a {
    /* required to keep absolute background on top */
    z-index: 1;
    /* required to keep text on top of absolute bg */
    position: relative;
    /* not mandatory; makes it look better when animating out
    because during that time it will be white on white */
    transition: color 1s;
}

#nav li a:before {
    background-color: #FFF;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    display: block;
    width: 100%;
    height: 100%;
    /* element will not appear without this */
    content: " ";
    position: absolute;
    /* height of the <a> so bg is off screen */
    /* text will appear above bg */
    z-index: -1;

    -webkit-transform: translate3d(0, -225px, 0);
    -moz-transform: translate3d(0, -225px, 0);
    -ms-transform: translate3d(0, -225px, 0);
    -o-transform: translate3d(0, -225px, 0);
    transform: translate3d(0, -225px, 0);
    -webkit-transition: -webkit-transform 1s ease;
    -moz-transition: -moz-transform 1s ease;
    -o-transition: -o-transform 1s ease;
    transition: transform 1s ease;
    /* Prevents flickering */
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}
#nav li a:hover {
    color: red;
}
#nav li a:hover:before {
    -webkit-transform: translate3d(0, -50px, 0);
    -moz-transform: translate3d(0, -50px, 0);
    -ms-transform: translate3d(0, -50px, 0);
    -o-transform: translate3d(0, -50px, 0);
    transform: translate3d(0, -50px, 0);
}

使用CSS3为a：aover事件设置动画

3 个答案: