CSSアニメーションでPC-98の文字点滅を再現する
社内の面倒くさいことを処理するシステムをちょこちょこ書いているとき、なぜか「ここは点滅したほうがいいな」などとレトロなことを考えたりするものである。
文字が点滅するなんて表現、今どきなかなかお目にかかることはない。業務情報に（権限さえあれば）外出先でスマホで見れるレシポンシブWebサイトでありながら画面上で文字が点滅する、この違和感は圧倒的なものだ。否応なしに注目させることができる。だからエラー表示にはちょうどいい、と、こういうわけだ。
そしてどうせなら、自分がプログラミングを始めた頃の、昔懐かしいA寝台、もとい国民機PC-9801の点滅を再現してみよう、と考えるのは、オッサンとしては当然の成り行きだろう。
PC-9801では文字カーソルが0.5秒ごとに点、滅、点、滅、を繰り返す。
文字点滅は、カーソルが点、滅、点のあとの滅のタイミングで文字が消え、次の点のタイミングで文字も表示される。この繰り返しだ。富士通FMシリーズの点滅と比べるとかなりゆったりしている。
つまり全体が2秒で、1.5秒から2.0秒までの0.5秒間だけ文字が消える、この繰り返しの表現をすればいい。
これをCSSで表現するのはなにも難しいことはない。
.blink {
animation: blink 2s step-end infinite;
}
@keyframes blink {
0% { opacity: 1 }
75% { opacity: 0 }
}
<html>
<body>
<span class="blink">この文字は点滅します</span>
</body>
</html>
以上だ。必要に応じて文字色を変えてやればいいだろう。
ただし背景色の扱いについては少し疑問が残っている。
このCSSで background-color を指定すると、背景色も含めて点滅するのだが、PC-9801ではどうだっただろうか。私の記憶では背景色は表示されたまま文字だけ点滅が正しい動きだったと思うが、さすがに PC-9801 の実機は手元にないので確認できていない。
Author And Source
この問題について(CSSアニメーションでPC-98の文字点滅を再現する), 我々は、より多くの情報をここで見つけました https://qiita.com/YamadaTakeo/items/2836927d00dd11ecb662著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .