This should be a footer

и мой CSS #footer {" />

Переход по высоте не работает CSS

css css-transitions

1226 просмотра

2 ответа

Мои коды довольно просты, но я не смог понять, как работает переход и как он не работает в моем 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;
    }

Я не вижу ничего плохого в моем коде. Это или я все еще неопытный. Спасибо!

Автор: Dinklefarts Источник Размещён: 08.11.2019 11:03

Ответы (2)


2 плюса

Решение

Попробуй это

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

Если это не работает, пожалуйста, скажите мне

Автор: user6342059 Размещён: 20.08.2016 08:27

0 плюса

  #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;
    }
<div id="footer">
    <div id="footer1">
        <p> This should be a footer </p>
    </div>
</div>

Просто поиграйте со значениями transition: width 3s, height 1s, transform 1s;

Ура!

Автор: loxsat Размещён: 20.08.2016 08:36
Вопросы из категории :
32x32