怎麼幫網站加上具有科技感的背景？用 CSS 做一個光線墜落特效

前幾天看到一個這樣的效果，覺得很酷很有科技感，嘗試了一下發現蠻簡單的，今天就來看看怎麼做吧！

JS 生成 DOM

這次先從 JS 開始，因為每個光線都是一個 DOM，所以直接用 JS 生成比較快速，你也可以手動使用 HTML 打多個 <div>。JS 的部分不會很難：

const lineCount = 20; // 線條的數量

for (let i = 1; i <= lineCount; i++) {
  const line = document.createElement('div'); // 製造 div 元素
  line.classList.add('line'); // 添加 class name
  
  line.style.setProperty('left',  
    `${i * (100 / lineCount) + Math.random() * 5 - 5}%`); // 隨機線條位置

  // 隨機動畫時間
  line.style.setProperty('--ani-duration', 8 + Math.random() * 10 + 's'); 
  line.style.setProperty('--ani-delay', -Math.random() * 10 + 's');
  
  document.body.appendChild(line); // 添加到 body 上
}

上面有兩個可以注意的地方line.style.setProperty('left',${i(100 lineCount) + Math.random() 5 - 5}%) :

我們先用 left 決定線條位置，並且會隨著 index 慢慢往右移動，最後的 Math.random() * 5 - 5% 是讓他稍微添加隨機感，每個線條的位置都會正負 5% 隨機

line.style.setProperty('--ani-duration', 8 + Math.random() * 10 + 's'); line.style.setProperty('--ani-delay', -Math.random() * 10 + 's'); :

這裡則是利用 css variable 來隨機動畫時間，我們可以用負的 animation-dealy 來製造隨機感，有不會真的需要延遲一段時間後才執行動畫，是不錯的技巧。

CSS 基本樣式

接著直接來寫 CSS，整體蠻簡單的，將 line 的高度設為 100vh，並用偽元素製作藍色線條。寫完之後會像下面這個樣子：

.line {
  --line-height: 80px;

  position: absolute;
  left: var(--left);
  width: 1px;
  height: 100vh;
  background: 
     linear-gradient(to bottom, transparent, var(--line-blue));
  z-index: 1;
}

.line::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--line-height);
}

CSS 光線墜落動畫

接著利用在 JS 製作的隨機動畫時間和延遲，加上 animation，一個簡單但很酷的效果就出來了！

.line::after {
  /* ... */
  animation: fall var(--ani-duration) var(--ani-delay) linear infinite;
}
@keyframes fall {
  0% {
    top: calc(-1 * var(--line-height));
  }
  100% {
    top: 100%;
  }
}

加上標題

最後，加上標題點綴一下，這裡我用 after 加上 linear-gradient，讓它由上到下是從透明到黑色，製作一種遮罩的感覺。

<h1>Background Beams</h1>

h1 {
  position: relative;
  font: 4vw sans-serif;
  color: white;
  z-index: 2;
}

h1:after {
  content: '';
  position: absolute;
  inset: 0;
  background: 
     linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%,
       rgba(0, 0, 0, 0.95) 100%);
}

到這邊就完成了，這邊附上 Codepen～