サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
iPhone 16
sezaki-design.com
ウェブサイトのデザイン演出にSVGアニメーションを入れたいなというときに、とっても便利なジェネレーターをご紹介。 https://svgartista.net/上記のサイトにアクセスしてSVG画像を読み込ませてパラメーターを設定すると、必要なコードを生成してくれるので後はそれを自身のウェブサイトに組み込むだけ。 UIのデザインもシンプルで分かりやすくていいですね。 では、簡単にやり方を解説します。 まずはアニメーションさせるSVG画像を作成します。 今回は線(stroke)がなぞるように描画され、その後に塗り(fill)が付くアニメーションにしたいので、イラストレーターでsezaki-designのロゴに線と塗りを付けました。 プレビュー画面で動作確認できるので便利!作成したロゴをSVG Artistaに読み込み、左のツールバーでパラメーターを設定。 CSSプロパティの種類は「transi
2020.02.24 / tips 脱クリッカブルマップ!hoverやレスポンシブにも対応できるクリッカブルなSVG Warning: Trying to access array offset on value of type null in /home/sezaki/sezaki-design.com/public_html/wordpress/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16 Warning: Trying to access array offset on value of type null in /home/sezaki/sezaki-design.com/public_html/wordpress/wp-content/plugins/codepen-embedde
このページを最初にブックマークしてみませんか?
『sezaki-design.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く