【簡単！】イラストからSVGアニメーションを作る
WEBサイトにちょっとした動きを加えたい時に便利なサイトをご紹介します。
Vivus Instant
は、Illustratorなどで作成した画像を
アニメーションに変換してくれるWEBサイトです。
https://maxwellito.github.io/vivus-instant/
svgデータはcssでbackgroundとして指定できるので、
background: url(ファイル名);
で簡単にサイトに導入できますよ！
※注意：
アニメーションできるのはパスで書いたもののみです。
アウトライン化されたものは動きません。
以下のサイトも参考にどうぞ！
線を引くSVGアニメーションの作り方 -文字や図形を一筆書きのように線・ラインで描く
https://coliss.com/articles/build-websites/operation/work/lightweight-svg-animation-vivus.html
-
前の記事
wordpressで検索機能を使用したい方におすすめ 2018.01.29
-
次の記事
【Illustrator】画像アセットでweb用素材を書き出す 2018.04.04