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

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

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

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

atatat.hatenablog.com

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

atatat.hatenablog.com

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

上の例のコードを一部変更して、ネオン風サインと点滅の部分の最低限のコードを以下に示す。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%の場合,省略*/
  }