轻松创建动画发光答案

【问题标题】：Easily create an animated glow轻松创建动画发光
【发布时间】：2016-04-21 15:30:15
【问题描述】：

我创建了这个图像：

使用 Photoshop，但我必须手动制作大约 50 层，然后用它创建一个 gif。有没有更简单的方法来自动创建类似的动画发光？

【问题讨论】：

【解决方案1】：

您可以使用 css 动画。这是一个使用原版div 容器的示例，但您可以给它一个背景图片：

div {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  background-color: #ccc;
  animation: glow 1s infinite alternate;
}

@keyframes glow {
  from {
    box-shadow: 0 0 10px -10px #aef4af;
  }
  to {
    box-shadow: 0 0 10px 10px #aef4af;
  }
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

确保在动画/盒子阴影中包含跨浏览器，现在它只能在 Chrome 上运行。
@Cam 为我工作，在 IE10+、Firefox 和 Chrome 上没有供应商前缀。 caniuse.com 列出了 keyframes、animation 和 box-shadow 对这些浏览器的支持。
顺便说一句，我 +1 你的答案，但为了安全起见，你仍应将它们包括在内。