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

この記事は最終更新日から3年以上が経過しています。

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

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

trkbt10
愛知県の音大を卒業後、クソ田舎岐阜の大垣の企業に入社。今は東京で働いている。
http://xn--9i8hku.ws/
ユーザー登録して、Qiitaをもっと便利に使ってみませんか。
  1. あなたにマッチした記事をお届けします
    ユーザーやタグをフォローすることで、あなたが興味を持つ技術分野の情報をまとめてキャッチアップできます
  2. 便利な情報をあとで効率的に読み返せます
    気に入った記事を「ストック」することで、あとからすぐに検索できます
コメント
この記事にコメントはありません。
あなたもコメントしてみませんか :)
すでにアカウントを持っている方は
ユーザーは見つかりませんでした