CSS animation 不平滑，帶有徑向漸變背景

Question

我正在嘗試創建一個具有平滑邊緣的脈動圓形背景。 對於邊緣光滑的圓圈，我使用的是這個 CSS 代碼：

background: radial-gradient(black, black, transparent, transparent);

使用下面的代碼可以很好地為背景顏色設置動畫。 然而，一旦我用這個徑向漸變背景替換背景顏色，animation 就會跳躍並且不再平滑。 該行為在多個瀏覽器上是一致的。 這是我遇到的問題的最小工作示例：

 .global { background: lightskyblue; }.silver { // background: radial-gradient(black, black, transparent, transparent); animation: pulse 3s infinite; } @keyframes pulse { 0%, 100% { // background-color: black; background: radial-gradient(black, transparent, transparent, transparent); } 50% { // background-color: white; background: radial-gradient(black, black, transparent, transparent); } }

 <body class="global"> <img src="pngwave.png" alt="test" class="silver" /> </body>

我發現這個Stackoverflow問題很相似，但並沒有幫助我解決我的問題。

Answer 1

您需要為background-size設置動畫

 .box { width: 200px; height: 200px; background: radial-gradient(farthest-side,black, transparent) center no-repeat; animation:pulse 2s linear infinite alternate; } @keyframes pulse{ from { background-size:50% 50%; } to { background-size:100% 100%; } }

 <div class="box"></div>

CSS animation 不平滑，帶有徑向漸變背景

問題描述

1 個解決方案

解決方案1
1 已采納 2020-04-19 13:56:56

CSS animation 不平滑，帶有徑向漸變背景

問題描述

1 個解決方案

解決方案1 1 已采納 2020-04-19 13:56:56

解決方案1
1 已采納 2020-04-19 13:56:56