UI/FE/UX/Interaction Engineer #HTML5 #CSS3 #SASS #Javascript #Node.js #Animation #SVG #PostCSS #AtomEditor #GamesJS
![SVG Animations](https://cdn-ak-scissors.b.st-hatena.com/image/square/7e48798f781bf79091dbd91aabfff4b59f5f3d62/height=288;version=1;width=512/https%3A%2F%2Fmedia.slid.es%2Fthumbnails%2F2ef7c68c8cc70468dba7374b4f430ab0%2Fthumb.jpg)
ページ遷移が楽しい繊細で滑らかな動き CSS3を使った滑らかな動きと大胆なタイポグラフィが魅力的な「Beatrice Creations」。黒と白を基調とした至ってシンプルなデザインながら、つい全ページを見てみたくなる、飽きのこない演出が施されている。 Béatrice Créationsでは、複数ある作品のロゴにSVGが使われており、作品ページを移動するたびに美しいカーブを描く。軽量で、枠線や線画によって繊細でリッチな世界観を演出する、今注目のSVGアニメーションを有効に活かしたサイトだ。 今回はこのサイトをヒントに、SVGの基本と、CSS3アニメーションを使った動かし方を解説する。CSSとHTMLのみで次のような枠線とテキストを描き、最終的にはjQueryを使って色を変えるデモを制作する。 STEP 1:SVGのパスを作成する アニメーションを作る前に、Illustratorを使って素
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く