轻松创建动画光晕

Question

我创建了这张图片：

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

Answer 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>

轻松创建动画光晕

Easily create an animated glow

image

css

photoshop

image-editing