如何在不使用外部函式庫的情況下在 CSS 中建立平滑的漸層背景動畫？

使用CSS 平滑漸變背景動畫

如果您遇到漸變動畫的問題，即漸變動畫突然變化而不是平滑過渡，請閱讀本文將提供一個不依賴外部程式庫的解決方案，例如jQuery。

動畫挑戰

處理漸層動畫時，實現多種顏色之間的平滑過渡可能具有挑戰性。預設動畫行為通常很突然，導致漸層從一個位置跳到另一個位置。

線性漸變背景

要創建平滑的漸變動畫，我們將使用線性漸變背景並使用 CSS 動畫來移動背景位置。我們的CSS樣式看起來像這樣：

#gradient {
  /* Gradient background properties */
  height: 300px;
  width: 300px;
  border: 1px solid black;
  font-size: 30px;
  background: linear-gradient(
    130deg,
    #ff7e00,
    #ffffff,
    #5cff00
  );
  background-size: 200% 200%;

  /* Animation properties */
  -webkit-animation: Animation 5s ease infinite;
  -moz-animation: Animation 5s ease infinite;
  animation: Animation 5s ease infinite;
}

@-webkit-keyframes Animation {
  0% {
    background-position: 10% 0%;
  }
  50% {
    background-position: 91% 100%;
  }
  100% {
    background-position: 10% 0%;
  }
}

@-moz-keyframes Animation {
  0% {
    background-position: 10% 0%;
  }
  50% {
    background-position: 91% 100%;
  }
  100% {
    background-position: 10% 0%;
  }
}

@keyframes Animation {
  0% {
    background-position: 10% 0%;
  }
  50% {
    background-position: 91% 100%;
  }
  100% {
    background-position: 10% 0%;
  }
}

HTML實作

在HTML中，我們需要建立一個div元素並套用「gradient」類別:

<div>

透過使用CSS 動畫操縱背景位置，我們可以建立流體漸層動畫。這種方法消除了突然的跳躍，並在顏色之間實現平滑、逐漸的過渡。

以上是如何在不使用外部函式庫的情況下在 CSS 中建立平滑的漸層背景動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！