Question

我正在尝试重新创建此处看到的转换 - http://piccsy.com/investors - 它是鼠标悬停时页面右侧的横幅。它说＆＃34;执行摘要＆＃34;。

这是我到目前为止所拥有的。我很接近，但只是可以;似乎让它完全相同。出于某种原因，容器内的文本不像光滑的容器那样移动。

<div id="executive-summary-bar" style="text-align: center;">
<a href="#executive-summary">Executive Summary </a></div>

#executive-summary-bar a{color:#ffffff; height:20px; margin-top:-5px;}    
#executive-summary-bar a:hover{color:#ffffff;}

#executive-summary-bar {
    height:20px;
    line-height: 1.2;
    background: none repeat scroll 0 0 #373435;
    color: #ffffff;
    font-size: 0.8em;
    margin-top: -10px;
    padding: 32px 3px 7px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 68px;
    transition: height 1s;
    -moz-transition: height 1s; /* Firefox 4 */
    -webkit-transition: height 1s; /* Safari and Chrome */
    -o-transition: height 1s; /* Opera */
    -ms-transition: height 1s; /* IE9 (maybe) */
}    
#executive-summary-bar:hover{
    height:35px;
    padding: 46px 3px 7px;
}    
#executive-summary-bar:after{
    border-left: 37px solid transparent;
    border-right: 37px solid transparent;
    border-top: 36px solid #373435;
    content: "";
    left:0;
    position: absolute;
    top:100%;
    width: 0;
}

div#executive-summary-bar {
    //right: 50px;
    //top: -40px;
}

Answer 1

<div/>中的文字位置由padding-top控制，但您只能为height设置动画。如果您将padding-top添加到转换声明you get the desired effect。

transition: height 1s, padding-top 1s;

CSS过渡时间问题

1 个答案: