Question

在this Fiddle中，我试图在容器元素中获得“发光”效果。

#box {
  width: 100px;
  height: 100px;
  margin: 10px;
  animation: glow 2s ease-in-out infinite alternate;
  -webkit-animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow {
  from {background-image:radial-gradient(circle farthest-side at center, rgba(255,0,0,0) 24px, rgba(255,0,0,1) 24px, rgba(255,0,0,0) 24px);}
  to {background-image:radial-gradient(circle farthest-side at center, rgba(255,0,0,0) 24px, rgba(255,0,0,1) 24px, rgba(255,0,0,0) 48px);}
}
@-webkit-keyframes glow {
  from {background-image:-webkit-radial-gradient(center,circle farthest-side, rgba(255,0,0,0) 24px, rgba(255,0,0,1) 24px, rgba(255,0,0,0) 24px);}
  to {background-image:-webkit-radial-gradient(center,circle farthest-side, rgba(255,0,0,0) 24px, rgba(255,0,0,1) 24px, rgba(255,0,0,0) 48px);}
}

它可以在IE10中运行，但由于某种原因在Chrome中它只是呈现“到”状态并且根本没有动画。渐变是否在Webkit中具有动画效果？

Answer 1

进一步检查时，background-image似乎不是Webkit中的动画属性，即使它是渐变。

这是一种耻辱，但至少它会显示静态发光，所以我想这就是。

Webkit动画径向渐变？

1 个答案: