概要 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の中にある%の数値を変更すれば、点滅のスピードや表示タイミングを変更することができます。


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



●参考



●関連ページ



●こんな記事も読まれています



ブログ著者

笹川純一・jdash2000

名前:(Google+のプロフィール)

ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

ブログ著者について


コメントをどうぞ


サイト内検索