CSS -youtube 影片 - 發光燈管文字動畫效果-Day20 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2023 iThome 鐵人賽

DAY 20

自我挑戰組

打造前端初學的知識培育庫系列第 20 篇

CSS -youtube 影片 - 發光燈管文字動畫效果-Day20

15th鐵人賽

skidoau

2023-10-05 23:45:04

465 瀏覽

分享至

哈囉事情是這樣的，這幾天作了幾個靜態網站，作了一些筆記，然後網路上有看到一些 CSS 教學覺得蠻有意思的，所以想來自己實作看看，哈哈！在最後面會放上參考網站及實作後的程式碼喲～
每天我都會將這篇文章裡的關鍵字、使用的語法、問題等做成清單，透過回想或許能幫助您加深記億喲

今天的關鍵字是 ...

text-shadow
contenteditavble="true"
text-transform
box-reflect
line-height
em、rem
outline:none
animation

參考影片 : https://www.youtube.com/watch?v=_13a3r6MYeM

初步分析 :

建立了一段可以改變的文字。
透過倒影、陰影特效產生燈光閃爍的動畫。

開始實作

首先先建立環境，contenteditavble=”true”屬性允許使用者編輯內容，而預設文字可以隨意輸入，這裡是please enter text。

<body>
  <h2 contenteditable="true">please enter text</h2>
</body>

text-transfom 可以將所有英文字改成大寫，text-align: center;可以幫助你把文字居中，可以用 border: 1px solid red來協助判斷，寬度設為width:100%，有助於響應式設計。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background:#07252d;
}
h2 {
  font-size: 4rem;
  letter-spacing: 15px;
  color: #0e3742;
  text-transform: uppercase;
  border: 1px solid red;
  text-align: center;
  border: 1px solid red;//輔助用
}

來建立倒影效果，box-reflect 是建立倒影的方式，below是在文字”下方”建立，1px是反射的距離，可以試著增減來看看。

-webkit-box-reflect: below 1px

接下來為它輸入漸層效果，-webkit-box-reflect: below 1px linear-gradient(transparent,#0004)，從完全透明到半透明，#000是黑色的十六進制，4則是透明的程度，以0~1的值表示，也就是半透明的黑色，可以調整看看，試著調成#0009能比較容易判斷漸層的順序。

加入line-height: 0.7em;有助於使倒影文字靠近文字，明天會再說明line-height的關係~影片上加了outline:none，是移除默認邊框的意思，但目前我看不出來差別所以我就沒有添加了
再來就來做閃爍燈光的動畫啦~調整顏色，可以看到目前動畫是 : 從原色到變亮。

@keyframes animate {
  0% {
    color: #0e3742;
  }
  100% {
    color: #fff;
  }
}

接下來要讓它有光暈的感覺，使用text-shadow : 水平偏移垂直偏移模糊半徑陰影顏色，要讓文字看起來發光，可以試著調高模糊半徑，這裡先試著將數字調為平穩的模糊，然後做比對，將模糊半徑調的高一點視覺上比較有感。

@keyframes animate {
  0% {
    color: #0e3742;
    text-shadow: none;
  }
  100% {
    color: #fff;
    text-shadow: 0 0 10px #03bcf4, 0 0 20px #03bcf4, 0 0 30px #03bcf4,
      0 0 40px #03bcf4, 0 0 50px #03bcf4;

    /*text-shadow: 0 0 10px #03bcf4, 0 0 20px #03bcf4, 0 0 40px #03bcf4,
      0 0 80px #03bcf4, 0 0 160px #03bcf4;*/
  }
}

最後要怎麼閃爍呢~你只需要在0%及100%輸入隨意數字，為了讓它有燈光閃爍的感覺，只需要掌握起始動畫跟結束動畫趴數間隔越近，閃的越快就沒問題囉~

@keyframes animate {
  0%,
  18%,
  20%,
  50.2%,
  60%,
  65.1%,
  80%,
  92% {
    color: #0e3742;
    text-shadow: none;
  }
  18.2%,
  20.1%,
  30%,
  50.8%,
  60.9%,
  65.8%,
  85%,
  92.5%,
  100% {
    color: #fff;
    /*text-shadow: 0 0 10px #03bcf4, 0 0 20px #03bcf4, 0 0 30px #03bcf4,
      0 0 40px #03bcf4, 0 0 50px #03bcf4;  */
    text-shadow: 0 0 10px #03bcf4, 0 0 20px #03bcf4, 0 0 40px #03bcf4,
      0 0 80px #03bcf4, 0 0 160px #03bcf4;
  }
}