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

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

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

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

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

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

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

キノウ３　コマオトシ

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

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

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

使い方

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

してください

　
　
そうしたらファイルを解凍し、中にある
「dokaben_ver2_1.ttf」を実行して

してください。

　
次に、dokaben.cssをダウンロードし、h1タグを書いたHTMLと同じ階層に置き、linkタグでダウンロードしたCSSファイルを読み込んでください。
これで準備は完了です。HTMLファイルをブラウザで開いてみましょう。

Q&A

Q. なぜウェブフォントにしないんですか？
A. フォントの再配布になるかと思って遠慮しました。

Q. ドカベンフォントじゃないとダメ？
A. 画像や動画でも同じようにできます。