【ネタ】blinkタグをCSS3で再現する(文字を点滅)


  • 公開:
  • 更新:
  • 編集:
概要 ▶ CSSのanimationを使うと簡単に再現できます。さぁ点滅させよう!

asahi.comが登場して20周年記念で、開設当時の様子を再現したページが公開されています。

トップページでリンクしているニュース記事は2015年8月10日の最新のものだが、ページデザインは横480ピクセルに収まるサイズで作られており、背景色はシルバー(bgcolor="#c0c0c0")で、「HTML 3.0をベースにデザインしています。Netscape 1.x の使用を推奨します。」との注意書きもある。

Netscape 1.xでの閲覧を推奨、20周年の「asahi.com」トップページが開設当時のデザインに -INTERNET Watch(Netscape 1.xでの閲覧を推奨、20周年の「asahi.com」トップページが開設当時のデザインに -INTERNET Watch)

20150822-BlinkタグをCSS3で再現-02

画像出典:Asahi NewsPaper Index(Asahi.com)


懐かしいですね。灰色の背景とか、バナーの感じとか、微妙に英語とか。



●昔よく使われていた文字を点滅させるタグ「blink」

このNetscape 1.0ネタではないですが、テキストを点滅させるblinkタグが昔のウェブブラウザーにあって、ホームページでよく使われていました。

こういうものですね。(アニメーションGIFです)

20150822-BlinkタグをCSS3で再現-01

何か懐かしさを感じる表現ですね。

最近のブラウザーではこのblinkタグに対応していないものがほとんどですが、これを新しい技術(CSS3)を使って再現してみます。


●blinkタグを再現するCSSのコード

というわけで早速CSSのコードを。

.blinking {
    -webkit-animation: 0.5s linear 0s alternate none infinite running blink;
    -moz-animation: 0.5s linear 0s alternate none infinite running blink;
    animation: 0.5s linear 0s alternate none infinite running blink;
}
@-webkit-keyframes blink {
    0% { opacity: 0; }
    19.9% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 1; }
}
@-moz-keyframes blink {
    0% { opacity: 0; }
    19.9% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 1; }
}
@keyframes blink {
    0% { opacity: 0; }
    19.9% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 1; }
}

あとは点滅させたい部分にclassで「blinking」を付けるだけです。文字だけでなく、画像もOKですよ。


↓こんな感じで動作します。(スマートフォン版で動作していない方はこちらのPC版へ

Welcome to My Homepage!!


いかがですか? 当時のそれっぽい感じになっていますか?

CSSのanimation部分にある「0.5s」の数字やkeyframeの中にある%の数値を変更すれば、点滅のスピードや表示タイミングを変更することができます。


それでは、よいホームページ作りを(笑)。



●参考



●関連ページ

カテゴリー:

このページをぜひシェアしてください