CSS 霓虹燈閃爍文字

所謂「工欲善其事，必先利其器」，我們要製作閃爍的文字，

就需要先寫好自己要閃爍的文字內容架構．

<div class="neon">NEON</div>

因為我個人偏好黑暗中的白色閃光，所以決定使用深色背景搭配白色文字．

body {
  background-color: #0e212c;
}
.neon {
  color: white;
  font-size: 60px;
}

寫完之後，大概這麼黑這麼白．

大多數要畫面內容會動的情況之下，就需要搭配animation，

較為複雜的動畫時也會需要去搭配更高深的套件（例如：pixi.js/three.js)，

不過今天的閃爍不太需要用到這麼高深的東西，可以輕鬆上手．

在寫animation之前，腦海需要思考過成品的樣子，

閃爍且忽明忽暗的節奏式，又是搭配著文字，

因此可以使用css中的text-shadow(文字陰影)來製作很像霓虹光暈效果，

控制光暈的大小來展示出閃爍的狀態．

先來寫上text-shadow，無需Ｘ,Ｙ的位移，只需要寫模糊的參數即可．

.neon {
  color: white;
  font-size: 60px;
  text-shadow: 0 0 50px #fff;
}

大概會長成這樣

如果你覺得只有一個陰影參數很不給力，可以疊好幾個，只是記得用逗號隔開就好，

.neon {
  color: white;
  font-size: 60px;
  text-shadow: 0 0 50px #fff,0 0 150px #fff,0 0 20px #fff;
}

當然如果你是內心充斥的美麗色彩的人，也可以每一層都填上不同的色彩．

不過目前我就先維持一個顏色，

再來要進入重點，讓它動起來！

我想讓他開始跟結束時都是小小的光暈感，中間放大光暈，使其有種閃爍的明暗感，

@keyframes neon {
  0%,
  100% {
    text-shadow: 0 0 20px #fff, 0 0 100px #fff, 0 0 20px #fff;
  }
  50% {
    text-shadow: 0 0 50px #fff, 0 0 150px #fff, 0 0 50px #fff;
  }
}

寫好動畫之後，就可以套上去啦！

.neon {
  color: white;
  font-size: 60px;
  animation: neon 1.5s ease-in-out infinite alternate;
}

該來看看成品了！

當然在animation中可以設定的也很多，例如我想在中間的過程變成藍色的字，

也沒什麼做不到的！

@keyframes neon {
  0%,
  100% {
    text-shadow: 0 0 20px #fff, 0 0 100px #fff, 0 0 20px #fff;
  }
  50% {
    text-shadow: 0 0 50px #fff, 0 0 150px #fff, 0 0 50px #fff;
    color: lightblue;
  }
}

以上就是運用css做出來的霓虹閃爍字囉！