image - アニメーションのグローを簡単に作成

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>