SVG アニメーションを Adobe Illustrator、HTML、CSS で作成する

SVG をアニメーション化するには、CSS で SVG の次の部分を調整する必要があります – “.st0” クラスと <path></path> タグ。

次のコードをコピーして、CSS ファイルに貼り付けます。

「.st0」クラスと <path></path> タグで SVG のストロークとフィルの色を設定できます。 ここでは、黒#000に設定しています。 Adobe Illustratorでは、ストロークは白#FFF、フィルカラーは無しでスタートしたことに注意してください。 これはSVGのすべてのプロパティに対して有効で、.cssファイルで変更することができます。

これが結果です

アニメーションを絶対にカスタマイズすることができます。 我々は上記のキュービックベジエのアニメーションを使用していることに注意してください。 アニメーションをカスタマイズするのに適した場所はこちらです https://cubic-bezier.com/

私たちのWebページの完全なコードは以下です

HTML

CSS

ここからAdobe Illustratorを入手 https://www.adobe.com/products/illustrator.html

以上です。もしこの記事を気に入ってもらえたなら、当社のFacebookページとIRIS WEB COREのウェブサイトを見てくださいね

そしていつものように素晴らしい1日を!

コメントする