霓虹 閃爍 css

CSS 霓虹燈閃爍文字

郭怡玲 Sabrina Guo 2022/04/27 10:00:00
377

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

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

<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,無需X,Y的位移,只需要寫模糊的參數即可.

.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做出來的霓虹閃爍字囉!

郭怡玲 Sabrina Guo