CSS 悬停，同方向过渡效果

Question

我在悬停时做一些基本的 CSS 填充过渡。 我以这个 codepen 为例： 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;}

谢谢

Answer 1

我认为如果您不使用自关闭标签，使用 :before 或 :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%); }

Answer 2

好的，我得到了答案：对于自上而下的操作：

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

感谢您为我指明伪 Frderico 的方向