SVGを自己アニメーションにする方法

Question

私のウェブサイトのホームページhttp://creativespectrums.com/には、同心円からなるSVGが含まれています。私はそれに人生をもたらしたいと思います。

ランダムパターンで自己アニメーションにすることはできますか？ホバリングにも対応したいと思います。私が探している効果は、これと似ています：https://www.youtube.com/watch?v=rNJw4AA0Gus。

Answer 1

SVGをバックグラウンドイメージとして使用している場合、CSSを使用してイメージ全体をアニメーション化することができます。

各レイヤーを別々にアニメートすることもできますが、これはあなたのsvg用のIMGタグを必要とし、imgタグアニメーションのIEではサポートされていません。

私がお勧めしたいのは、各レイヤーを複数の要素で別々の背景イメージにしてから、コンテナを上に置いたときにそれらをアニメーション化することです。

希望すると便利です。