我正在尝试创建一个边缘光滑的脉动圆形背景。对于边缘光滑的圆，我使用以下 CSS 代码:
background: radial-gradient(black, black, transparent, transparent);
使用下面的代码可以很好地设置背景颜色的动画。然而，一旦我用这个径向渐变背景替换背景颜色，动画就会跳跃并且不再平滑。该行为在多个浏览器上是一致的。这是我遇到的问题的一个最小的工作示例:
.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问题类似，但没有帮助我解决我的问题。
最佳答案
您需要为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>关于html - CSS 动画在径向渐变背景下不平滑，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61305422/