首頁 >web前端 >css教學 >如何使用 CSS 建立懸停時從左到右的背景顏色填充?

如何使用 CSS 建立懸停時從左到右的背景顏色填充?

DDD
DDD原創
2024-11-01 11:23:13923瀏覽

How to Create a Left-to-Right Background Color Fill on Hover Using CSS?

使用CSS 實現懸停時從左到右的背景顏色填充

實現懸停時從左到右的背景顏色填充在元素上,採用線性漸層和過渡。首先在 50% 標記處配置具有兩種顏色的線性漸變,例如紅色和藍色。然後,將漸層設定為位於右側,並將元素的大小相對於其寬度和高度加倍(例如 200%)。

當元素懸停在上方時,將背景位置改為「左邊」。合併「過渡:全 2 輕鬆;」應用平滑過渡。

對於需要供應商前綴的瀏覽器,請參閱初始問題下的註解。

其他自訂

建立顏色過渡,將漸變寬度增加到300% 並調整開始(例如34%)和結束(例如65%) 相應地定位。

範例:

<code class="css">div {
  font: 22px Arial;
  display: inline-block;
  padding: 1em 2em;
  text-align: center;
  color: white;
  background: red; /* default color */

  /* Linear gradient and initial position */
  background: linear-gradient(to left, salmon 50%, lightblue 50%) right;
  background-size: 200%;
  transition: .5s ease-out;
}
div:hover {
  background-position: left;
}</code>

HTML:

<code class="html"><div>Hover me</div></code>

以上是如何使用 CSS 建立懸停時從左到右的背景顏色填充?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn