【css】cssだけでフラッシュするテキスト

今回もcssだけシリーズです。

テキストがフラッシュしている感じに見せるエフェクトをcssだけで実装しています。

まずはデモをご覧ください。

DEMO

注意を促したいときなどに良いですね。
ってことでソースです。

HTML

<div class="area">&#9888; CAUTION &#9888;</div>
<br>
<div class="area2">&#9888; Warning &#9888;</div>

area2では赤文字にしてみました。

CSS

body {
 background: #111;
 font-family: arial;
}

.area {
  text-align: center;
  font-size: 6.5em;
  color: #fff;
  letter-spacing: -5px;
  font-weight: 700;
  text-transform: uppercase;
  animation: blur .75s ease-out infinite;
  text-shadow: 0px 0px 5px #fff, 0px 0px 7px #fff;
}

@keyframes blur {
  from {
    text-shadow:0px 0px 10px #fff,
      0px 0px 10px #fff, 
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #7B96B8,
      0px 0px 150px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px -10px 100px #7B96B8,
      0px -10px 100px #7B96B8;
  }
}

.area2 {
  text-align: center;
  font-size: 6.5em;
  color: red;
  letter-spacing: -5px;
  font-weight: 700;
  text-transform: uppercase;
  animation: blur .65s ease-out infinite;
  text-shadow: 0px 0px 5px red, 0px 0px 7px red;
}

@keyframes blur {
  from {
    text-shadow:0px 0px 10px #fff,
      0px 0px 10px #fff, 
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #7B96B8,
      0px 0px 150px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px -10px 100px #7B96B8,
      0px -10px 100px #7B96B8;
  }
}

bodyは基本的にブラック系じゃないと映えないエフェクトですので、黒ベースのサイトなどを作成する際に使えるかもしれませんね。
animation: blur .65s ease-out infinite;の.65sの部分でスピード調節ができます。

ソース元
https://codepen.io/moklick/pen/tAlJB

それでは。