2017.12.14

CSSでネオンサイン風の点滅アニメーション

CSSのアニメーションを使って簡単にネオン風のアニメーションを作ることができます。使う場面はあまりないかもしれませんが、スニペットの1つとして紹介します。

ネオン風


<div class="neon">N<span>eo</span>n</div>


.neon {
  display: inline-block;
  color: #fff;
  letter-spacing: .05em;
  font-size: 5em;
  text-shadow: 0 1px 30px #FB1684, 0 0 12px #fff, 2px 5px 60px #990a52;
}
.neon > span {
  -webkit-animation: blink 3s infinite alternate;
  animation: blink 3s infinite alternate;
}
@-webkit-keyframes blink {
  40% {
    opacity: .85;
  }
  42% {
    opacity: .4;
  }
  43% {
    opacity: .85;
  }
  45% {
    opacity: .4;
  }
  46% {
    opacity: .85;
  }
}
@keyframes blink {
  40% {
    opacity: .85;
  }
  42% {
    opacity: .4;
  }
  43% {
    opacity: .85;
  }
  45% {
    opacity: .4;
  }
  46% {
    opacity: .85;
  }
}

点滅させたい文字を span で囲み、@keyframes を使って点滅させています。

CSS本執筆しました！！！

CSS本出します！1/29発売予定
自分がCSS学びたての頃にもっとはやく知りたかったテクニックを載せています。CSSの基礎知識について解説していないので、中級者〜向けとなります。CSS入門書を読んではみたものの、思い通りに作れない人にオススメです。
よろしくお願いします。https://t.co/fkz1dM03Pj pic.twitter.com/suYyaPqwIs
— たかもそ＠CSS本1/29発売!! (@takamosoo) 2018年12月31日