如何使CSS平滑过渡

问题描述

如何获得 （下拉示例），到目前为止，我仅设法更改了文本和背景颜色，但没有更改整个过渡效果（矩形在悬停时滚动而未悬停时平滑地滚动），任何想法我都怎么能实现这一目标？这是我的代码：

how can i get a css transition example like in here (the dropdown example), so far I've managed to only change the text and background color, but not the whole transition effect thing (where the rectangle rolls when hovered and rolls back smoothly when un-hovered), any idea how can i achieve it? here's my code:

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

在此之前谢谢您

推荐答案

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

这篇关于如何使CSS平滑过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！