轻松创建动画发光

Posted 2023-02-16

【中文标题】轻松创建动画发光

【英文标题】：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;
  

<div></div>

【讨论】：

确保在动画/盒子阴影中包含跨浏览器，现在它只能在 Chrome 上运行。

@Cam 为我工作，在 IE10+、Firefox 和 Chrome 上没有供应商前缀。 caniuse.com 列出了 keyframes、animation 和 box-shadow 对这些浏览器的支持。

顺便说一句，我 +1 你的答案，但为了安全起见，你仍应将它们包括在内。