私のコーデイングバイブル

CSSで発光しているような文字を作る

こちらで投稿している内容は受注した案件の中で出てきた内容です。
また、必ずどこかで役に立つだろうと思います。
CSSで発光しているような文字を作るですが、LPで見出し・テキストを目立させたいときに効果的です。

背景黒、テキスト白の光る文字

先ずはベースとして、背景黒（#000）、文字色白（#fff）で作成しました。

See the Pen テキストが光る（１） by 奥谷晋司 (@itpyduhk-the-encoder) on CodePen.

反転色と補色を意識することをオススメします。

テキストの色を金色の #e6b422 に変えるだけでも与える印象が変わります。

See the Pen Untitled by 奥谷晋司 (@itpyduhk-the-encoder) on CodePen.

反対色ツールという便利なサイトがあるので試してみてください　→　Web色変換
「背景黒、テキスト白の光る文字」で作成したものの、確かに光っているようにみえますが、物足りなくないでしょうか・・・
点滅させてみます。

背景黒、テキスト白の光る文字を点滅させる

テキストが点滅しているのがわかるでしょうか。
追加したのはアニメーションの２点です。

1.animation: flashing 1s ease-in-out infinite alternate;
2.@keyframes flashing { 0% {opacity: 0;} 100% {opacity: 1;} }

See the Pen Untitled by 奥谷晋司 (@itpyduhk-the-encoder) on CodePen.

光る文字を点滅させるanimationについて

animation-name: アニメーション名は flashing にしました。
animation-duration: アニメーション1回分の時間の長さは 1s です。
animation-timing-function: アニメーションの動き方は ease-in-out ゆっくりはじまり、ゆっくり終わる。


liner	一定
ease	開始と完了が滑らか
ease-in	ゆっくり始まる
ease-out	ゆっくり終わる
ease-in-out	ゆっくり始まり、ゆっくり終わる

animation-iteration-count: 繰り返す回数 infinite は無限に繰り返す。
animation-direction: 反転再生するかどうか alternate は通常再生を繰り返す。
これらをまとめると animation: flashing 1s ease-in-out infinite alternate; になります。


normal	通常再生繰り返し
alternate	偶数回は反対再生

光る文字を点滅させる@keyframesについて

@keyframesはアニメーションの開始から終了までに、どのような動きをさせるのかを指定します。
@keyframesのあとにanimationプロパティで指定した任意の名前を書くことによって紐付けます。
アニメーションの開始を「0%」、終了を「100%」とした場合のプロパティの変化を下記のように記載します。

まとめ

点滅を多用するとうるさくなってしまうので特に目立たせたい部分に！

CSSで発光しているような文字を作る

目次

背景黒、テキスト白の光る文字

背景黒、テキスト白の光る文字を点滅させる

光る文字を点滅させるanimationについて

光る文字を点滅させる@keyframesについて

まとめ