卡卡網(wǎng)

霓虹燈文本可以為網(wǎng)站添加美感，本文介紹如何使用CSS創(chuàng)建霓虹燈效果的文本，在本文中，我們將看看如何為文本添加發(fā)光效果。

霓虹燈文本

為文本添加發(fā)光效果

首先，我們讓文字發(fā)光，這可以在帶有text-shadow屬性的CSS中完成，我們可以巧妙地通過逗號分隔它們來應(yīng)用多個陰影：

.neonText {
  color: #fff;
  text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px #0fa,
    0 0 82px #0fa,
    0 0 92px #0fa,
    0 0 102px #0fa,
    0 0 151px #0fa;
}

text-shadow需要四個值，前兩個分別代表陰影的水平和垂直位置，第三個值表示模糊半徑的大小，而最后一個值表示陰影的顏色。為了增加發(fā)光效果的大小，我們將增加第三個值，它代表模糊半徑。或者，用另一種方式表達：

text-shadow: [x-offset] [y-offset] [blur-radius] [color];

這是我們用那一點點CSS得到的效果：

 
發(fā)光字體

CSS

.neonText {
  color: #fff;
  text-shadow:
      0 0 7px #fff,
      0 0 10px #fff,
      0 0 21px #fff,
      0 0 42px #0fa,
      0 0 82px #0fa,
      0 0 92px #0fa,
      0 0 102px #0fa,
      0 0 151px #0fa;
}

/* Additional styling */
  
body {
  font-size: 18px;
  font-family: "Vibur", sans-serif;
  background-color: #010a01;
}  

h1, h2 {
  text-align: center;
  text-transform: uppercase;
  font-weight: 400;
}
  
h1 {
    font-size: 4.2rem;
}
  
h2 {
    font-size: 1.8rem;
}

.container {
  margin-top: 20vh;
}

HTML

<div class="container">
    <h1 class="neonText">
          404
    </h1>
    <h2 class="neonText">Page Not Found</h2> 
</div>

execcodegetcode

你可能想知道這是怎樣得到的，首先，我們在文本的外邊緣添加了白色發(fā)光效果，并具有較小的模糊半徑。

.neonText {
  color: #fff;
  text-shadow:
    /* White glow */
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
}

最后五個值是形成綠色光暈的較大模糊半徑的較寬文本陰影。

.neonText {
  color: #fff;
  text-shadow:
    /* White glow */
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    /* Green glow */
    0 0 42px #0fa,
    0 0 82px #0fa,
    0 0 92px #0fa,
    0 0 102px #0fa,
    0 0 151px #0fa;
}

如果我們能用少于五個陰影來實現(xiàn)這一點就好了，但我們需要所有這些陰影，以便它們可以相互堆疊以增加發(fā)光的深度。如果我們使用單個text-shadow代替，效果將不會具有使其看起來逼真所需的深度。

繼續(xù)嘗試各種色調(diào)和顏色以及模糊半徑大??！你可以制作各種各樣的炫酷發(fā)光效果，因此請嘗試不同的變化——你甚至可以混合一種顏色與另一種顏色混合的顏色。

“閃爍”效果

關(guān)于霓虹燈“閃爍”效果，我們可以用CSS動畫做同樣的事情！我們用@keyframes來制作一個動畫，以快速、看似隨機的閃光來打開和關(guān)閉燈光。

@keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px #0fa,
      0 0 80px #0fa,
      0 0 90px #0fa,
      0 0 100px #0fa,
      0 0 150px #0fa;
  }
  20%, 24%, 55% {       
    text-shadow: none;
  }
}

我們采用了與text-shadow之前完全相同的屬性和值，將它們包裝在一個@keyframes名為的動畫flicker中，并在時間軸中選擇點來應(yīng)用陰影，以及完全去除陰影的點。

剩下的就是在我們希望燈光閃爍的地方調(diào)用動畫。在這種特殊情況下，我們只將它添加到<h1>元素中。

h1 {
  animation: flicker 1.5s infinite alternate;     
}

效果

“閃爍”效果

CSS

.neonText {
  animation: flicker 1.5s infinite alternate;
  color: #fff;
}

h1 {
  font-size: 4.2rem;    
}

/* Flickering animation */
@keyframes flicker {
    
  0%, 18%, 22%, 25%, 53%, 57%, 100% {

      text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px #0fa,
      0 0 80px #0fa,
      0 0 90px #0fa,
      0 0 100px #0fa,
      0 0 150px #0fa;
  
  }
  
  20%, 24%, 55% {        
      text-shadow: none;
  }    
}


/* Additional styling */
  
h2 {
 font-size: 1.8rem;
}
.container {
  margin-top: 20vh;
}

body {
  font-size: 18px;
  font-family: "Helvetica Neue", sans-serif;
  background-color: #010a01;
}  

h1, h2 {
  text-align: center;
  text-transform: uppercase;
  font-weight: 400;
}

HTML

<div class="container">
    <h1 class="neonText">
          404
    </h1>
    <h2 class="neonText">Page Not Found</h2> 
</div>

execcodegetcode

添加邊框

通過給邊框添加陰影，我們可以給它和文本一樣的霓虹燈效果！

無論是文本容器的元素是什么，都需要邊框。假設(shè)我們只使用一個<h1>元素，這就是我們獲得的邊框。我們調(diào)用border 屬性在標題周圍制作一個純白色邊框，加上一點填充來給文本邊距空間：

h1 {
  border: 0.2rem solid #fff;
  padding: 0.4em;
}

我們可以通過border-radius將邊框的角稍微圓潤一點，這樣邊框就不會那么尖銳了。你可以使用最適合你的任何值來獲得你想要的精確圓度。

h1 {
  border: 0.2rem solid #fff;
  border-radius: 2rem;
  padding: 0.4em;
}

最后一塊是發(fā)光！現(xiàn)在，text-shadow不適用于這里的邊框，但這沒關(guān)系，因為這就是該box-shadow屬性的設(shè)計目的。語法非常相似，因此我們甚至可以準確地提取我們所擁有的text-shadow內(nèi)容并稍微調(diào)整值：

h1 {
  border: 0.2rem solid #fff;
  border-radius: 2rem;
  padding: 0.4em;
  box-shadow: 0 0 .2rem #fff,
              0 0 .2rem #fff,
              0 0 2rem #bc13fe,
              0 0 0.8rem #bc13fe,
              0 0 2.8rem #bc13fe,
              inset 0 0 1.3rem #bc13fe;
}

注意到那個inset關(guān)鍵字了嗎？這是text-shadow無法做到的，但是將它添加到邊框，box-shadow可以讓我們在邊框的兩側(cè)獲得一些光暈以獲得一些逼真的深度。

增加邊框

CSS

.neonText {
  color: #fff;
  text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px #bc13fe,
    0 0 82px #bc13fe,
    0 0 92px #bc13fe,
    0 0 102px #bc13fe,
    0 0 151px #bc13fe;
}
  
body {
  font-size: 18px;
  font-family: "Sacramento", sans-serif;
  background-color: #010a01;
  display: flex;
  justify-content: center;
  align-items: center;  
}  

h1, h2 {
  text-align: center;
  font-weight: 400;
}
  
h1 {
  font-size: 6.2rem;
  animation: pulsate 1.5s infinite alternate;  
  border: 0.2rem solid #fff;
  border-radius: 2rem;
  padding: 0.4em;
  box-shadow: 0 0 .2rem #fff,
            0 0 .2rem #fff,
            0 0 2rem #bc13fe,
            0 0 0.8rem #bc13fe,
            0 0 2.8rem #bc13fe,
            inset 0 0 1.3rem #bc13fe; 
}

@keyframes pulsate {
    
  100% {

      text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px #bc13fe,
      0 0 80px #bc13fe,
      0 0 90px #bc13fe,
      0 0 100px #bc13fe,
      0 0 150px #bc13fe;
  
  }
  
  0% {

    text-shadow:
    0 0 2px #fff,
    0 0 4px #fff,
    0 0 6px #fff,
    0 0 10px #bc13fe,
    0 0 45px #bc13fe,
    0 0 55px #bc13fe,
    0 0 70px #bc13fe,
    0 0 80px #bc13fe;

}

HTML

<h1 class="neonText">
 neon lights
</h1>

execcodegetcode

標簽: css  css3  霓虹燈文本  發(fā)光文本