如何使用「背景位置」在 CSS 中實現平滑的漸層動畫？-css教學-PHP中文網

如何使用「背景位置」在 CSS 中實現平滑的漸層動畫？

Susan Sarandon

發布： 2024-12-13 17:24:11

原創

410 人瀏覽過

How to Achieve Smooth Gradient Animations in CSS Using `background-position`?

如何使用 CSS 平滑地製作漸變動畫

在 CSS 中製作漸變動畫可能很棘手，特別是如果您想實現平滑過渡。產生不一致結果的一種方法是突然改變漸變的位置。

考慮以下程式碼：

.animated {<br> 寬度：300px;<br> 高度： 300px;<br> 邊框：1px 純黑；<br> 動畫：gra 5s無限；<br> 動畫方向：反向；<br> -webkit-animation：gra 5s 無限；<br> -webkit-animation-direction ：反向；<br>動畫計時函數：線性；<br> -webkit -animation-timing-function:線性;<br>}<p>@keyframes gra {<br> 0% {</p><pre class="brush:php;toolbar:false">background: linear-gradient(135deg, #ff670f 0%, #ff670f 21%, #ffffff 56%, #0eea57 88%);

登入後複製

}
50% {

background: linear-gradient(135deg, #ff670f 0%, #ff670f 10%, #ffffff 40%, #0eea57 60%);

登入後複製

100% {

background: linear-gradient(135deg, #ff670f 0%, #ff670f 5%, #ffffff 10%, #0eea57 40%);

登入後複製

}
}

此程式碼建立漸變動畫，但它突然改變其位置，導致斷斷續續的效果。為了解決這個問題，我們可以在關鍵影格中使用background-position屬性來平滑地移動漸層。

這是一個改進的CSS程式碼，可以實現平滑的漸層動畫：

<h1>漸變</h1><p>{</p><pre class="brush:php;toolbar:false">height:300px;
width:300px;
border:1px solid black;
font-size:30px;
background: linear-gradient(130deg, #ff7e00, #ffffff, #5cff00);
background-size: 200% 200%;

-webkit-animation: Animation 5s ease infinite;
-moz-animation: Animation 5s ease infinite;
animation: Animation 5s ease infinite;

登入後複製

}

@-webkit-keyframes 動畫{

0%{background-position:10% 0%}
50%{background-position:91% 100%}
100%{background-position:10% 0%}

登入後複製

}

@-moz-關鍵影格動畫{

0%{background-position:10% 0%}
50%{background-position:91% 100%}
100%{background-position:10% 0%}

登入後複製

}

@keyframes 動畫 {

0%{background-position:10% 0%}
50%{background-position:91% 100%}
100%{background-position:10% 0%}

登入後複製

}

在此code:

我們使用background-size來設定漸變的大小區域，該區域大於元素本身以允許無縫移動。
動畫屬性 zorgt voor een vloeiende 中的緩和overgang。

透過應用這些原則，您可以純粹透過 CSS 創建流暢且具有視覺吸引力的漸變動畫，而不需要額外的 JavaScript 函式庫或框架。

以上是如何使用「背景位置」在 CSS 中實現平滑的漸層動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！