周末在家習慣性登陸 Apex，準備玩幾盤。在登陸加速器的過程中，發現加速器到期了。
我一直用的騰訊網遊加速器，然而點選充值按鈕，提示最近用戶端更新改造，暫不支援充值（這個操作把我震驚了~）。隻能轉頭下載下傳網易 UU 加速器。
打開 UU 加速器首頁，映入眼簾的是這樣一幅畫面：
瞬間，被它這個背景圖吸引。
出于對 CSS 的敏感，盲猜了一波這個用 CSS 實作的，至少也應該是 Canvas。打開控制台，稍微有點點失望，居然是一個 <code>.mp4</code>檔案：
再看看 <code>Network</code> 面闆，這個 <code>.mp4</code> 檔案居然需要 3.5M？
emm，瞬間不想打遊戲了。這麼個背景圖，CSS 不能搞定麼？
這個技巧，我在 奇思妙想 CSS 3D 動畫 | 僅使用 CSS 能制作出多驚豔的動畫？ 也有提及過，感興趣的可以一并看看。
假設我們有這樣一張圖形：
這張圖先放着備用。在使用這張圖之前，我們會先繪制這樣一個圖形：
一共設定了 5 個子元素，不過仔細看 CSS 代碼，其中 4 個子元素都設定了 <code>rotateX/Y(90deg/-90deg)</code>，也就是繞 X 軸或者 Y 軸旋轉了 90°，在視覺上是垂直螢幕的一張平面，是以直覺視覺上我們是不到的，隻能看到一個平面 <code>.item-middle</code>。
我将 5 個子 item 設定了不同的背景色，結果如下：
現在看來，好像平平無奇，确實也是。
不過，見證奇迹的時候來了，此時，我們給父元素 <code>.g-container</code> 設定一個極小的 <code>perspective</code>，譬如，設定一個 <code>perspective: 4px</code>，看看效果：
此時，畫風驟變，整個效果就變成了這樣：
由于 <code>perspective</code> 生效，原本的平面效果變成了 3D 的效果。接下來，我們使用上面準備好的星空圖，替換一下上面的背景顔色，全部都換成同一張圖，神奇的事情發生了：
由于設定的 <code>perspective</code> 非常之小，而每個 item 的 <code>transform: translateZ(50px)</code> 設定的又比較大，是以圖檔在視覺上被拉伸的非常厲害。但是整體是充滿整個螢幕的。
接下來，我們隻需要讓視角動起來，給父元素增加一個動畫，通過控制父元素的 <code>translateZ()</code> 進行變化即可：
看看，神奇美妙的星空穿梭的效果就出來了，Amazing：
美中不足之處在于，動畫沒能無限銜接上，開頭和結尾都有很大的問題。
當然，這難不倒我們，我們可以：
通過疊加兩組同樣的效果，一組比另一組通過負的 <code>animation-delay</code> 提前行進，使兩組動畫銜接起來（一組結束的時候另外一組還在行進中）
再通過透明度的變化，隐藏掉 <code>item-middle</code> 迎面飛來的突兀感
最後，可以通過父元素的濾鏡 <code>hue-rotate</code> 控制圖檔的顔色變化
我們嘗試修改 HTML 結構如下：
修改後的核心 CSS 如下：
最終完整的效果如下，星空穿梭的效果，整個動畫首尾相連，可以一直無限下去，幾乎沒有破綻，非常的贊：
上述的完整代碼，你可以猛擊這裡：CSS 靈感 -- 3D 宇宙時空穿梭效果
這樣，我們就基本還原了上述見到的網易 UU 加速器首頁的動圖背景。
當然，這裡還是會有讀者吐槽，你這裡不也用了一張圖檔資源麼？沒有那張星空圖行不行？這張圖我也懶得去找。
當然可以，CSS YYDS。這裡我們嘗試使用 <code>box-shadow</code>，去替換實際的星空圖，也是在一個 <code>div</code> 标簽内實作，借助了 SASS 的循環函數：
這裡，我們用 SASS 封裝了一個函數，利用多重 <code>box-shadow</code> 的特性，在傳入的大小的高寬内，生成傳入個數的點。
這樣，我們可以得到這樣一幅圖，用于替換實際的星空圖：
我們再把上述這個圖，替換實際的星空圖，主要是替換 <code>.item</code> 這個 class，隻列出修改的部分：
這樣，我們就實作了這樣一個效果，在不借助額外資源的情況下，使用純 CSS 實作上述效果：
CodePen Demo -- Pure CSS Galaxy Shuttle 2
通過調整動畫的時間，<code>perspective</code> 的值，每組元素的 <code>translateZ()</code> 變化距離，可以得到各種不一樣的觀感和效果，感興趣的讀者可以基于我上述給的 DEMO 自己嘗試嘗試。
好了，本文到此結束，希望本文對你有所幫助 😃
更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。
如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。