menu

想像とシンプル/体温を感じるWEBサービス
WEB DISIGNERS Blog

2016/03/19
  • CSS
  • html5
  • SVG

文字をアニメーションで表示させる。SVGとCSSで簡単設定

SVGとCSS3を使ったテキストアニメーションの方法です。とても簡単にできるのでご紹介します。
svg

使用方法

手順

① Illustratorなどで文字をアウトライン化してSVG形式で保存してください。


② SVGファイルをテキストエディタなどで開き、「<svg></svg>」の中のテキストをHTMLに配置。


③ SVGの中のパスに「class」「stroke」「stroke-width」を追記。


④ CSSで動きを設定します。


以上です。

SVGファイル

SVGファイルをテキストエディタで開くと以下のような数値が出てきます。

HTML

<svg></svg>の中のテキストをHTMLに配置し、パスへ「・class・stroke・stroke-width」を追記する。
今回は「classにanimetion」「strokeは#000」「stroke-widthは1」を追記。

CSS

CSSで動きを設定します。

Option

思っていたよりも、とても簡単に表示することができます。

コメントを残す




POPULAR POSTS

高機能jQueryスライダー「Slider Pro」の使い方

2016/03/03

HTML要素に背景としてYouTube動画を表示するレスポンシブ対応

2016/02/11

「HTML5」と「CSS」のみで背景動画をフルスクリーンで再生する

2016/04/09

HTML/CSSのみで動きを加えてくれるアニメーション ホバーエフェクト9選まとめ

2016/03/24

NEW ENTRY

HTMLとCSSだけ簡単シンプルなスライダーを実装

2016/08/23

マウスホバーでテキストの色を左からアニメーションで変更するCSSテクニック

2016/07/26

テキストをCSSだけで映画のタイトルのように、ぼかしたブラーの状態から徐々に表示させるテクニック

2016/07/12

画像を使わずにCSSのみでボーダーにグラデーションをかける方法

2016/07/11