如何实现流畅的CSS过渡效果

Question

我想获取一个类似于这里的CSS过渡示例（下拉菜单示例）。到目前为止，我只能改变文本和背景颜色，但无法实现整个过渡效果（鼠标悬停时矩形滚动并且当鼠标离开时平滑地滚回去），有什么办法可以实现吗？这是我的代码：

a.menulink
{
text-decoration: none;
color: #000000;
background-color: rgb(235,235,185);
-webkit-transition: color .25s linear;
transition: color .25s linear;
transition: background-color .15s linear .1;
}

a.menulink:hover
{
text-decoration: none;
color: #FFFFFF;
background-color: rgb(255,24,24);
-webkit-transition: color .25s linear, background-color .15s linear .1s;
transition: color .25s linear, background-color .15s linear .1s;
}

谢谢您的支持。

- Abie Giordano

Answer 1

See this Demo

<a href="#" class="linkhover">
    <span hover-title="LINK HOVER">LINK HOVER</span>
</a>

.linkhover {
    display: inline-block;
    overflow: hidden;
    perspective: 400px;
    -webkit-perspective: 400px;
    perspective-origin: 50% 50%;
    -webkit-perspective-origin: 50% 50%;
}
.linkhover span {
    display: block;
    position: relative;
    transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    transform-origin: 50% 0%;
    -webkit-transform-origin: 50% 0%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}
.linkhover:hover span {
    transform: translate3d( 0px, 0px, -35px ) rotateX( 90deg );
    -webkit-transform: translate3d( 0px, 0px, -35px ) rotateX( 90deg );
}
.linkhover span:after {
    content: attr(hover-title);
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    color: white;
    background: red;
    transform-origin: 50% 0%;
    -webkit-transform-origin: 50% 0%;
    transform: translate3d( 0px, 100%, 0px ) rotateX( -90deg );
    -webkit-transform: translate3d( 0px, 100%, 0px ) rotateX( -90deg );
}

- Vikas Ghodke

---

随时可以查看，但是为了更好地理解CSS在3D动画中的透视效果，请阅读以下链接：http://css-tricks.com/almanac/properties/p/perspective/ - Vikas Ghodke

抱歉再次打扰您，但它似乎与Chrome不兼容，有什么建议吗？ - Abie Giordano

我在 Chrome Mac v28 上检查过了，它可以正常工作。请再次在此处检查 http://jsfiddle.net/52uta/1/。 - Vikas Ghodke

我刚刚检查了一下，它在IE上不起作用，有什么解决方法吗？谢谢 :) - Abie Giordano

所以我应该添加像{-ms-webkit-transform: translate3d( 0px, 100%, 0px ) rotateX( -90deg );}这样的代码才能让IE正确工作？ - Abie Giordano

Answer 2

只需使用此代码，无需在“:hover”选择器中使用过渡效果。

a.menulink{
text-decoration: none;
color: #000000;
background-color: rgb(235,235,185);
-webkit-transition: color .25s linear;
transition: color .25s linear;
transition: background-color .15s linear .1s;
}

a.menulink:hover
{
text-decoration: none;
color: #FFFFFF;
background-color: rgb(255,24,24);}

- AHJeebon