SVG線画が美しいリッチアニメーションの作り方 (2/2)
STEP 4：ボックスに組み込む SVGのアニメーションができたら、続いて、線で取り囲むためのボックスを用意する。一見すると1pxのボーダーを指定しただけのdiv要素に見えるが、あとで動きをつけるために、幅もしくは高さを1pxにして塗りつぶしたdiv要素を上下左右に4つ配置し、枠線として見せている。 ボックスが完成したら、先ほど作成したSVGをボックス（div.db）の中に入れる。 ■ソースコード（HTML） <div class="box"> <div class="bd"> <svg><g><path class="path" d="M5….." /></g></svg> <div class="bdT"></div> <div class="bdB"></div> <div class="bdR"></div> <div class="bdL"></div> </div><!-- .
SVGとCSS3でできる筆記体のアニメーションをやってみる | スターフィールド株式会社
SVGとCSS3を使った線画によるテキストのアニメーションの方法が紹介されていました。 想像していたよりも、ずっと簡単にできることがわかりました。 こちらの方法を少し応用して筆記体のアニメーションをやってみましたので、 ご紹介いたします。 ↓参考にさせていただいたサイト SVG線画が美しいリッチアニメーションの作り方 ↓作ってみたもの DEMO 方法 基本的な方法・手順は参考サイトと一緒です。 1. Illustratorを使い、筆記体のフォントを、ペンツールを使って一筆書きのパスとしてトレースする Illustratorでモデルとなる筆記体のフォントでテキストを配置し、ペンツールでトレースします。 このとき、パスは途中で切らずに、一筆書きの状態になるよう、1つのパスでトレースします。 ただ、実際の筆記体のように、t, fの横線は別のパスとして作成し、 iの点の部分は星形のパスとして作成し
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
