Question

嘿我正在建立我的网站，我遇到了问题。

以下是我的网站：http://legacybydesign.tv/webdesign/index.html

当您接管菜单时，它会花费。但文字跳了，我想知道你是否可以让它更顺畅？

Answer 1

您实际上需要将过渡添加到悬停状态，并为行高和背景设置动画。我还建议你将速度改为.3s

.inactive:{
    height: 5.083em;
    line-height: 5.083em;
    padding: 0 2.618em 0 1.618em;
    border-bottom: 0.09em solid rgba(255, 234, 173, 0.1);
    -webkit-transition: height .3s ease, line-height .5s ease;
    -moz-transition: height .3s ease, line-height .5s ease;
    -o-transition: height .3s ease, line-height .5s ease;
    transition: height .3s ease, line-height .5s ease;
}

.inactive:hover{
    background-color: #ca0012;
    height: 6.853em;
    line-height: 6.853em;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

Answer 2

您只在height属性上制作动画，但您也在更改行高。尝试将animation上的.inactive属性更改为：

transition: height 0.5s ease-out, line-height 0.5s ease-out; 
-webkit-transition: height 0.5s ease-out, line-height 0.5s ease-out;

Answer 3

在H2上应用ease-in-out并且不活动

.inactive {
height: 5.083em;
line-height: 5.083em;
padding: 0 2.618em 0 1.618em;
border-bottom: 0.09em solid rgba(255, 234, 173, 0.1);
transition: height 0.5s ease-in-out;
-webkit-transition: height 0.5s ease-in-out;
}

.inactive h2 {
color: white;
font-weight: 100;
text-align: right;
-webkit-transition: all 500ms ease-in-out;
}

使文本过渡顺利

3 个答案: