つれづれなる備忘録

日々の発見をあるがままに綴る

ブログデザイン備忘録 ~ ネオン風サインの点滅

f:id:ATATAT:20210601234257p:plain:w600

今回はCSSを用いてネオン風のサインを点滅させる方法について紹介したい。

ネオン風の見出しの作成は、かなり前の記事で紹介しているが、基本的にはtext-shadowを複数回使用して影を少しづつづらして、グラデーション効果を作成する。

atatat.hatenablog.com

text-shadowについては以下も参照。

atatat.hatenablog.com

さらにanimationを用いて、text-shadowの効果を切り替えることで点滅しているように見せることができる。

coliss.com

上の例のコードを一部変更して、ネオン風サインと点滅の部分の最低限のコードを以下に示す。HTMLでclass名でjackpotは点滅、test1はアニメーションのkeyframeで0,100%の状態、test2はkeyframeで50%の状態を示す。

<div id="container">
  <div class="sign-three">
    <div class="jackpots">JACKPOTS</div>
    <div class="test1">JACKPOTS</div>
    <div class="test2">JACKPOTS</div>
  </div>
</div>

CSSの骨格は以下のようになる。基本的にはanimationを設定して、@keyframeでネオン風にするためtext-shadowで影を多重につけていく。

.jackpots {
    font-size: 6.3vw;
    margin-left: 1.5vw;
  }

.jackpots {
    animation: jackpots 1s 0s ease infinite;
    -moz-animation: jackpots 1s 0s ease infinite;
  }
@keyframes jackpots {
    0%,
    100% {
    text-shadow: 
  /*省略*/
    }
    50% {
    text-shadow: 
    /*省略*/
    }
  }
.test1 {
    font-size: 6.3vw;
    margin-left: 1.5vw;
    color: #FED128;
   text-shadow: 
/*100%の場合,省略*/
  }

.test2 {
    font-size: 6.3vw;
    margin-left: 1.5vw;
    color: #FED128;
   text-shadow: 
/*50%の場合,省略*/
  }

フルコードと動作例を以下に示す。

See the Pen Neon sign by ATATAT (@atatat) on CodePen.