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