CSSで再現するドカベンOPの文字エフェクト

More than 1 year has passed since last update.


たったーたららったったーたららったーたーーーーーーー

CSSドカベンスクリプト作ってみた


キノウ1 ループサイセイカノウ

ループ再生可能.gif

<h1 class='dokaben loop komaochi'>ダウンロード</h1>


キノウ2 ソクドヘンコウカノウ

ソクドヘンコウ可能.gif

<h1 class='dokaben loop speed-up komaochi'>ダウンロード</h1>


キノウ3 コマオトシ

komaotoshi.gif

<h1 class='dokaben loop komaochi'>コマオトシあり</h1>

<h1 class='dokaben loop'>コマオトシナシ</h1>


キノウ4 カイテンジクヘンコウ

baseline.gif


<h1 class='dokaben loop komaochi'>ドカベン</h1>
<h1 class='dokaben loop komaochi vartical-align-baseline'>ドカベン</h1>


使い方

まず、sm29720917様にてドカベンフォントを

down.gif

してください

 

 

そうしたらファイルを解凍し、中にある

「dokaben_ver2_1.ttf」を実行して

install.gif

してください。

 

次に、dokaben.cssをダウンロードし、h1タグを書いたHTMLと同じ階層に置き、linkタグでダウンロードしたCSSファイルを読み込んでください。

これで準備は完了です。HTMLファイルをブラウザで開いてみましょう。

IE.gif


Q&A

Q. なぜウェブフォントにしないんですか?

A. フォントの再配布になるかと思って遠慮しました。

Q. ドカベンフォントじゃないとダメ?

A. 画像や動画でも同じようにできます。

oshimai.gif