CSSで発光しているような文字を作る
こちらで投稿している内容は受注した案件の中で出てきた内容です。
また、必ずどこかで役に立つだろうと思います。
CSSで発光しているような文字を作るですが、LPで見出し・テキストを目立させたいときに効果的です。
背景黒、テキスト白の光る文字
先ずはベースとして、背景黒（#000）、文字色白（#fff）で作成しました。
See the Pen テキストが光る（１） by 奥谷 晋司 (@itpyduhk-the-encoder) on CodePen.
反転色と補色を意識することをオススメします。
- 補色：ある色相の反対側に位置する色の組み合わせ。赤を例にとると、青緑が補色になります。
- 反対色相：補色とその両隣2つの合計5色の組み合わせ。赤を例にとると黄緑、青緑、青、青紫になります。
テキストの色を金色の #e6b422 に変えるだけでも与える印象が変わります。
See the Pen Untitled by 奥谷 晋司 (@itpyduhk-the-encoder) on CodePen.
反対色ツールという便利なサイトがあるので試してみてください 👉 Web色変換
「背景黒、テキスト白の光る文字」で作成したものの、確かに光っているようにみえますが、物足りなくないでしょうか・・・
点滅させてみます。
背景黒、テキスト白の光る文字を点滅させる
テキストが点滅しているのがわかるでしょうか。
追加したのはアニメーションの２点です。
- animation: flashing 1s ease-in-out infinite alternate;
- @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%」とした場合のプロパティの変化を下記のように記載します。
まとめ
点滅を多用するとうるさくなってしまうので特に目立たせたい部分に！