轻松创建动画光晕
Easily create an animated glow
我创建了这张图片:
使用 photoshop,但我必须手动制作大约 50 个图层,然后用它创建一个 gif。有没有更简单的方法来自动创建类似于此的动画光晕?
您可以使用 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>
我创建了这张图片:
使用 photoshop,但我必须手动制作大约 50 个图层,然后用它创建一个 gif。有没有更简单的方法来自动创建类似于此的动画光晕?
您可以使用 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>