javascript - 使用 CSS3 为 :hover 事件设置动画

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“过渡”属性应该适合您作为纯 CSS 解决方案的需求。

这里有 2 个涵盖 CSS 过渡的快速链接。

• http://www.w3schools.com/css3/css3_transitions.asp
• http://www.creativebloq.com/css3/animation-with-css3-712437

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);
}