[英]CSS hover, transition effect in the same direction
我在懸停時做一些基本的 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;}
謝謝
我認為如果您不使用自關閉標簽,使用 :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%); }
好的,我得到了答案:對於自上而下的操作:
.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 的方向
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.