CSS 漸層色製作星空背景

這篇教學會使用 CSS 的重複線性漸層顏色，在只用了一兩個 div 的狀態下，製作包含充滿星星的天空以及流星，並搭配 CSS 的 transform 轉換與 animation 動畫，製作具有特色的星空背景效果。

快速導覽：

製作星空和流星

讓星空與流星動起來

星空動畫中加入會動的文字

CSS 教學 - CSS 漸層色製作星空背景

製作星空和流星

製作星空背景需要先產生「滿天的星星」，運用 CSS 的重複線性漸層搭配重複背景，只要調整顏色的間距，就可以做出「全部都是小點」的背景，下方範例呈現全都是白點黑底的效果。

參考：repeating-linear-gradient()

線上展示：https://codepen.io/oxxo/pen/ZYEWajj

<!-- HTML 程式碼 -->
<div class="sky">
  <div class="star"></div>
</div>

<!-- CSS 程式碼 -->
<style>
  div {position: relative;}
  .sky {
    margin: 20px;
    width: 400px;
    height: 400px;
  }
  .star {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        35deg,
        #0000 1px, #0000 2px,
        #000 2px, #000 51px,
        #000 51px, #000 52px,
        #000 52px, #000 80px),
        repeating-linear-gradient(
        -35deg,
        #fff 1px, #fff 2px,
        #000 2px, #000 51px,
        #fff8 51px, #fff8 52px,
        #000 52px, #000 80px);
  }
</style>

CSS 教學 - CSS 漸層色製作星空背景 - 重複線性漸層顏色製作星空

由於星空位於「同一層」，移動時會整片移動，為了讓星空有視差的效果，可以額外使用虛擬元素「::before」額外製作另外一層間距不同的星空，以及使用虛擬元素「::after」製作流星，流星的做法只需要將交錯的漸層「變長」並且不要讓顏色重疊，就可以產生類似流星的效果，完成後透過 mix-blend-mode: screen 就能讓圖層使用「濾色」模式互相混合。

參考：虛擬元素選擇器 ( 偽元素 )、CSS 影像混合模式 mix-blend-mode

線上展示：https://codepen.io/oxxo/pen/JojXOBq

<!-- HTML 程式碼 -->
<div class="sky">
  <div class="star"></div>
</div>

<!-- CSS 程式碼 -->
<style>
  div {position: relative;}
  .sky {
    margin: 20px;
    width: 400px;
    height: 400px;
    background: linear-gradient(#336 0, #000 100%); /* 外層加上藍到黑的背景 */
  }
  .star {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        35deg,
        #0000 1px, #0000 2px,
        #000 2px, #000 51px,
        #0000 51px, #0000 52px,
        #000 52px, #000 80px),
        repeating-linear-gradient(
        -35deg,
        #fff 1px, #fff 2px,
        #000 2px, #000 51px,
        #fff8 51px, #fff8 52px,
        #000 52px, #000 80px);
    mix-blend-mode: screen;   /* 混合模式 */
  }
  /* 虛擬元素 */
  .star::before, .star:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: screen;
  }
  /* 虛擬元素製作第二層星空，注意角度和間距有所不同 */
  .star::before {
    background: repeating-linear-gradient(
        80deg,
        #0000 1px, #0000 2px,
        #000 2px, #000 51px),
        repeating-linear-gradient(
        0deg,
        #fffa 1px, #fffa 2px,
        #000 2px, #000 51px);
  }
  /* 虛擬元素製作流星，注意漸層色的位置 */
  .star::after {
    background: repeating-linear-gradient(
        35deg,
        #0000 1px, #0000 2px,
        #000 100px, #000 500px),
        repeating-linear-gradient(
        -35deg,
        #fff 1px, #fff 2px,
        #000 2px, #000 400px);
    background-size: 200% 200%;    /* 調整尺寸 */
    background-position: 200% 20%; /* 調整位置 */
  }
</style>

CSS 教學 - CSS 漸層色製作星空背景 - 重複線性漸層顏色和虛擬元素製作星空與流星

讓星空與流星動起來

做出星空之後，就可以加入 CSS animation，讓兩層星空以不同的速度緩慢的往左邊移動，然後流星用比較快的速度往左下移動，詳細步驟可以觀看下方程式碼中的註解說明，需要注意的是如果要移動背景，需要先將背景尺寸變大，否則就無法移動背景。

參考：CSS 動畫 animation

線上展示：https://codepen.io/oxxo/pen/dPyMZqy

<!-- HTML 程式碼 -->
<div class="sky">
  <div class="star"></div>
</div>

<!-- CSS 程式碼 -->
<style>
  div {position: relative;}
  .sky {
    margin: 20px;
    width: 400px;
    height: 400px;
    background: linear-gradient(#336 0, #000 100%);
    overflow: hidden;  /* 隱藏超過範圍的部分 */
  }
  .star {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        35deg,
        #0000 1px, #0000 2px,
        #000 2px, #000 51px,
        #0000 51px, #0000 52px,
        #000 52px, #000 80px),
        repeating-linear-gradient(
        -35deg,
        #fff 1px, #fff 2px,
        #000 2px, #000 51px,
        #fff8 51px, #fff8 52px,
        #000 52px, #000 80px);
    mix-blend-mode: screen;
    background-size: 200% 200%;              /* 背景變大 */
    background-position: 350% -50%;          /* 背景位置 */
    animation: skyMove linear infinite 100s; /* 星空移動動畫，線性移動 100 秒 */
  }
  .star::before, .star:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: screen;
  }
  .star::before {
    background: repeating-linear-gradient(
        80deg,
        #0000 1px, #0000 2px,
        #000 2px, #000 51px),
        repeating-linear-gradient(
        0deg,
        #fffa 1px, #fffa 2px,
        #000 2px, #000 51px);
    background-size: 200% 200%;              /* 背景變大 */
    background-position: 350% -50%;          /* 背景位置 */
    animation: skyMove linear infinite 120s; /* 星空移動動畫，線性移動 120 秒 */
  }
  .star::after {
    background: repeating-linear-gradient(
        35deg,
        #0000 1px, #0000 2px,
        #000 100px, #000 500px),
        repeating-linear-gradient(
        -35deg,
        #fff 1px, #fff 2px,
        #000 2px, #000 400px);
    background-size: 200% 200%;             /* 背景變大 */
    background-position: 135% 60%;          /* 背景位置 */
    animation: starMove infinite linear 5s; /* 流星移動動畫，線性移動 5 秒 */
  }
  /* 星空移動 */
  @keyframes skyMove {
    0%{background-position: 0% 0%;}
    100%{ background-position: 200% 0%;}
  }
  /* 流星移動 */
  @keyframes starMove {
    0%{background-position: 135% 60%;}
    100%{ background-position: 350% -50%;}
  }
</style>

CSS 教學 - CSS 漸層色製作星空背景 - 讓星空與流星動起來

星空動畫中加入會動的文字

進行到這個步驟，主要星空的效果已經完成，接著可以替星空加入更多裝飾，例如將畫面改成圓形，模擬太空船的窗戶，接著使用文字搭配 CSS transform 的 3D 轉換效果，就能讓文字從窗戶外旋轉著飛過去，詳細步驟可以參考下方程式碼的註解說明。

參考：CSS transform 轉換函式、CSS transform 3D 轉換與透視

線上展示：https://codepen.io/oxxo/pen/wBvGPEd

<!-- HTML 程式碼 -->
<div class="sky">
  <h1>OXXO</h1>
  <div class="star"></div>
</div>

<!-- CSS 程式碼 -->
<style>
  div {position: relative;}
  .sky {
    margin: 20px;
    width: 400px;
    height: 400px;
    background: linear-gradient(#336 0, #000 100%);
    overflow: hidden;
    border: 20px solid #633;           /* 邊框加粗 */
    border-radius: 50%;                /* 圓角邊框讓形狀變成圓形 */
    perspective: 100px;                /* 相機視角往後移動 100px，需要加上這個才會有 3D 效果 */
    perspective-origin:center center;  /* 攝影機對齊中心 */
  }
  h1 {
    position: absolute;
    font-size: 100px;
    color: #fff;
    top: 50px;
    left: 0;
    transform: translate(-400px,10px) rotate3d(1,1,1,60deg); /* 文字 3D 變換 */
    animation: textMove linear infinite 10s;                 /* 動畫無限重複，文字線性移動 10 秒 */
  }
  /* 文字動畫 */
  @keyframes textMove {
    0%{transform: translate(-400px,10px) rotate3d(1,1,1,60deg);}
    25%{transform: translate(-200px,60px) rotate3d(1,2,1.5,60deg);}
    50%{transform: translate(0px,-60px) rotate3d(.5.1,1,1,60deg);}
    75%{transform: translate(200px,60px) rotate3d(5,1.5,3,60deg);}
    100%{transform: translate(400px,10px) rotate3d(1.5,0.5,1,60deg);}
  }
  .star {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        35deg,
        #0000 1px, #0000 2px,
        #000 2px, #000 51px,
        #0000 51px, #0000 52px,
        #000 52px, #000 80px),
        repeating-linear-gradient(
        -35deg,
        #fff 1px, #fff 2px,
        #000 2px, #000 51px,
        #fff8 51px, #fff8 52px,
        #000 52px, #000 80px);
    mix-blend-mode: screen;
    background-size: 200% 200%;
    background-position: 350% -50%;
    animation: skyMove linear infinite 100s;
  }
  .star::before, .star:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: screen;
  }
  .star::before {
    background: repeating-linear-gradient(
        80deg,
        #0000 1px, #0000 2px,
        #000 2px, #000 51px),
        repeating-linear-gradient(
        0deg,
        #fffa 1px, #fffa 2px,
        #000 2px, #000 51px);
    background-size: 200% 200%;
    background-position: 350% -50%;
    animation: skyMove linear infinite 120s;
  }
  .star::after {
    background: repeating-linear-gradient(
        35deg,
        #0000 1px, #0000 2px,
        #000 100px, #000 500px),
        repeating-linear-gradient(
        -35deg,
        #fff 1px, #fff 2px,
        #000 2px, #000 400px);
    background-size: 200% 200%;
    background-position: 135% 60%;
    animation: starMove infinite linear 5s;
  }
  @keyframes skyMove {
    0%{background-position: 0% 0%;}
    100%{ background-position: 200% 0%;}
  }
  @keyframes starMove {
    0%{background-position: 135% 60%;}
    100%{ background-position: 350% -50%;}
  }
</style>

CSS 教學 - CSS 漸層色製作星空背景 - 星空動畫中加入會動的文字

小結

雖然 CSS 沒有「隨機」的功能可以製作隨機的星星 ( 希望未來會有 )，但仍然可以透過一些小技巧，讓星空效果更加逼真，這篇教學單純運用漸層色的互相搭配，就可以在不需要一大堆 div 的狀態下，純粹利用 CSS 作出星空效果。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～

CSS 漸層色製作星空背景

製作星空和流星

讓星空與流星動起來

星空動畫中加入會動的文字

小結

意見回饋

CSS 教學

基本介紹

CSS 選擇器

數值與單位

規則與定義

函式類型

顏色與濾鏡

文字與段落

元素容器

背景與陰影

清單與表格

基本排版與定位

Flex 彈性排版

Grid 網格排版

轉場與動畫

變形、裁切與遮罩

視窗與使用者行為

範例效果