Question

我的代码非常简单，但我无法了解转换的工作原理以及它在我的HTML上的效果如何：

<div id="footer">
    <div id="footer1">
        <p> This should be a footer </p>
    </div>
</div>

和我的CSS

        #footer {
        position: fixed;
        bottom: 0;
        background-color: black;
        min-width: 100%;
        font-family: Agency FB;
        transition: width 3s;
    }
    #footer1 {
        text-align: center;
        color: #4e4e4e;

    }
    #footer:hover {

        opacity: .8;
        color: white;
        height: 100px;
    }

我的代码没有任何问题。那还是我还没经验。谢谢！

Answer 1

试试这个

#footer {
    position: fixed;
    bottom: 0;
    background-color: black;
    min-width: 100%;
    font-family: Agency FB;
    transition: height 3s;
    height: 50px;
}
#footer1 {
    text-align: center;
    color: #4e4e4e;

}
#footer:hover {

    opacity: .8;
    color: white;
    height: 100px;
}

如果它不起作用，请告诉我

Answer 2

＆＃13;

  #footer {
        position: absolute;
        bottom:0;
        background-color: black;
        min-width: 100%;
        height:50px;
        font-family: Agency FB;
        transition: width 3s, height 1s, transform 1s;
    }
    #footer1 {
        text-align: center;
        color: #4e4e4e;
    }
    #footer:hover {
        opacity: .8;
        color: white;
        height: 100px;
    }

＆＃13;

<div id="footer">
    <div id="footer1">
        <p> This should be a footer </p>
    </div>
</div>

＆＃13;

只需使用transition: width 3s, height 1s, transform 1s;

的值

干杯！

高度转换不工作CSS

2 个答案: