CSS при наведении, эффект перехода в том же направлении - PullRequest
Новая
       12

CSS при наведении, эффект перехода в том же направлении

0 голосов
/ 07 ноября 2018

Я делаю некоторые базовые CSS-переходы при наведении. Я использовал этот кодовый блок в качестве примера: https://codepen.io/brandon4117/pen/ihIgE. Теперь при наведении курсора фоновая позиция поднимается, чтобы заполнить div, а при наведении курсора фон возвращается обратно вниз. Я хотел знать, как я могу изменить эту ручку, чтобы работа, например, когда зависание при переходе, шла вверх, а не вниз.

Большинство переходов при наведении: наведите курсор мыши на новую заливку сверху-> снизу. При наведении курсора на новую заливку удаляется «снизу вверх». Я хотел бы сделать при наведении заливки сверху-> снизу, при наведении на заливке снова удаляется верх-> низ.

Посмотрите на используемый CSS: 

div {border-style: solid;
border-color: black;
color: black;
padding: 50px;
background-size: 200% 200%;
background-image: 
linear-gradient(to top, #A72424 50%, transparent 50%);
background-position:0 100%;
-webkit-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-moz-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-ms-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-o-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
transition: background-position 300ms, color 300ms ease, border-color 300ms ease;

}

div:hover {color: white;
border-color: #A72424;
background-image: 
linear-gradient(to top, #A72424 50%, transparent 50%);
background-position: 0 0%;
-webkit-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-moz-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-ms-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
-o-transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
transition: background-position 300ms, color 300ms ease, border-color 300ms ease;
}

a {color: black; text-decoration: none;
transition: all 100ms linear;
-webkit-transition: all 100ms linear;
-moz-transition: all 100ms linear;
-ms-transition: all 100ms linear;
-o-transition: all 100ms linear;}

a:hover {color: white;
transition: all 100ms linear;
-webkit-transition: all 100ms linear;
-moz-transition: all 100ms linear;
-ms-transition: all 100ms linear;
-o-transition: all 100ms linear;
}

a:active {color: white;}

Спасибо

Ответы [ 2 ]

0 голосов
/ 07 ноября 2018

Хорошо, я получил ответ: Для сверху вниз сделайте это: 

.divclass::after {
    position: absolute;
    transition: 0.3s;
    content: '';
    height: 0;
    top: 50%;
    right: 0;
    width: 3px;
    background: #fff;
    bottom: 0;
    top: auto;
    z-index: -1;
    width: 120%;
}



.divclass:hover::after {
    height: 100%;
    top: 0;
}

Спасибо, что указали мне в сторону псевдо Фридрико

0 голосов
/ 07 ноября 2018

Я думаю, что проще сделать этот эффект с псевдоэлементом a: before или a: after вместо фона, если вы не используете самозакрывающиеся теги. 

div { padding: 50px; border: 2px solid #000; color: #000; position: relative; transition: 0.3s ease; }
div:after { content: ""; height: 0; width: 100%; background-color: #A72424; position: absolute; top: 0; left: 0; transition: 0.3s ease; }
div:hover { color: #fff; border-color: #A72424; }
div:hover:after { height: 100%; }

в случае, если вам нужно использовать линейный градиент, вам просто нужно изменить направление линейного градиента на «вниз» вместо «наверх» 

div { background-image: linear-gradient(to bottom, #A72424 50%, transparent 50%); }
div:hover { background-image: linear-gradient(to bottom, #A72424 50%, transparent 50%); }
...