1. >
  2. >
  3. svgエディタを使わず文字をアニメーションさせるCSS

svgエディタを使わず文字をアニメーションさせるCSS

テキストのイメージ

更新日:

svgにするといいと聞くけど、調べても何やら難しい内容がつらつら書かれていて結局諦めてしまっていませんか?
イラレとかエディタ使って書き出して~~とかよくわからないと感じている方必見。
簡単にsvgを使ってアニメーションさせる方法。

このサイトのタイトルでも使っています。
HTML上では、svg と text で好きなテキスト部分を囲むだけ。

アニメーションDEMO

office-kibunya

動かないときは、リロードかけてみてください。

調整の仕方

textの後ろに記載されているXとYは、場所の指定をしています。
X=”0″のところは横リスト
Y=”0″のところは縦リスト

マイナスの指定も可能です。X=”-10%”としたら、少し左に設置される感じです。

dxやdyと書くと、一文字ずつに位置を当てることもできます。

dyで位置の指定や装飾をする

dyは一文字ずつに指定ができるので、装飾で文字をカーブさせたいときに便利です。
以下の文字列を曲げたいとき、一つずつの文字をspanで囲んだり、Javascriptを使うとか手間ですよね。
文字の順番に合わせて指定してあげればいいので、簡単に曲げられます。

曲げてみるDEMO

ABCDE

HTMLに書いたのはこれだけ。dyで文字の位置を指定して、rotetは傾きを指定します。

注意点として、HTMLに直接書くのでテキストの内容修正があると手間です。

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る