我正在尝试创建具有平滑边缘的脉动圆形背景。对于具有平滑边缘的圆,我正在使用以下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问题,该问题与之相似,但并没有帮助我解决问题。
答案 0 :(得分: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>