[[433718]]

背景

周末在家習(xí)慣性登陸 Apex，準(zhǔn)備玩幾盤。在登陸加速器的過程中，發(fā)現(xiàn)加速器到期了。

我一直用的騰訊網(wǎng)游加速器，然而點擊充值按鈕，提示最近客戶端升級改造，暫不支持充值(這個操作把我震驚了~)。只能轉(zhuǎn)頭下載**網(wǎng)易 UU 加速器**[1]。

打開 UU 加速器首頁，映入眼簾的是這樣一幅畫面：

[[433719]]

瞬間，被它這個背景圖吸引。

出于對 CSS 的敏感，盲猜了一波這個是用 CSS 實現(xiàn)的，至少也應(yīng)該是 Canvas。打開控制臺，稍微有點點失望，居然是一個 .mp4文件：

再看看 Network 面板，這個 .mp4 文件居然需要 3.5M?

emm，瞬間不想打游戲了。這么個背景圖，CSS 不能搞定么?

使用 CSS 3D 實現(xiàn)星際 3D 穿梭效果

這個技巧，我在 奇思妙想 CSS 3D 動畫 | 僅使用 CSS 能制作出多驚艷的動畫?[2] 也有提及過，感興趣的可以一并看看。

假設(shè)我們有這樣一張圖形：

這張圖先放著備用。在使用這張圖之前，我們會先繪制這樣一個圖形：

<div class="g-container"> 
  <div class="g-group"> 
      <div class="item item-right"></div> 
      <div class="item item-left"></div>    
      <div class="item item-top"></div> 
      <div class="item item-bottom"></div>  
      <div class="item item-middle"></div>     
  </div> 
</div> 

body { 
  background: #000; 
} 
.g-container { 
  position: relative; 
} 
.g-group { 
  position: absolute; 
  width: 100px; 
  height: 100px; 
  left: -50px; 
  top: -50px; 
  transform-style: preserve-3d; 
} 
.item { 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  background: rgba(255, 255, 255, .5); 
} 
.item-right { 
  background: red; 
  transform: rotateY(90deg) translateZ(50px); 
} 
.item-left { 
  background: green; 
  transform: rotateY(-90deg) translateZ(50px); 
} 
.item-top { 
  background: blue; 
  transform: rotateX(90deg) translateZ(50px); 
} 
.item-bottom { 
  background: deeppink; 
  transform: rotateX(-90deg) translateZ(50px); 
} 
.item-middle { 
  background: rgba(255, 255, 255, 0.5); 
  transform: rotateX(180deg) translateZ(50px); 
} 

一共設(shè)置了 5 個子元素，不過仔細(xì)看 CSS 代碼，其中 4 個子元素都設(shè)置了 rotateX/Y(90deg/-90deg)，也就是繞 X 軸或者 Y 軸旋轉(zhuǎn)了 90°，在視覺上是垂直屏幕的一張平面，所以直觀視覺上我們是不到的，只能看到一個平面 .item-middle。

我將 5 個子 item 設(shè)置了不同的背景色，結(jié)果如下：

現(xiàn)在看來，好像平平無奇，確實也是。

不過，見證奇跡的時候來了，此時，我們給父元素 .g-container 設(shè)置一個極小的 perspective，譬如，設(shè)置一個 perspective: 4px，看看效果：

.g-container { 
  position: relative; 
+ perspective: 4px; 
} 
// ...其余樣式保持不變 

此時，畫風(fēng)驟變，整個效果就變成了這樣：

由于 perspective 生效，原本的平面效果變成了 3D 的效果。接下來，我們使用上面準(zhǔn)備好的星空圖，替換一下上面的背景顏色，全部都換成同一張圖，神奇的事情發(fā)生了：

由于設(shè)置的 perspective 非常之小，而每個 item 的 transform: translateZ(50px) 設(shè)置的又比較大，所以圖片在視覺上被拉伸的非常厲害。但是整體是充滿整個屏幕的。

接下來，我們只需要讓視角動起來，給父元素增加一個動畫，通過控制父元素的 translateZ() 進(jìn)行變化即可：

.g-container{ 
  position: relative; 
  perspective: 4px; 
  perspective-origin: 50% 50%; 
} 
 
.g-group{ 
  position: absolute; 
  // ... 一些定位高寬代碼 
  transform-style: preserve-3d; 
  + animation: move 8s infinite linear; 
} 
 
@keyframes move { 
  0%{ 
    transform: translateZ(-50px) rotate(0deg); 
  } 
  100%{ 
    transform: translateZ(50px) rotate(0deg); 
  } 
} 

看看，神奇美妙的星空穿梭的效果就出來了，Amazing：

美中不足之處在于，動畫沒能無限銜接上，開頭和結(jié)尾都有很大的問題。

當(dāng)然，這難不倒我們，我們可以：

1. 通過疊加兩組同樣的效果，一組相對另一組通過負(fù)的 animation-delay 提前行進(jìn)，使兩組動畫銜接起來(一組結(jié)束的時候另外一組還在行進(jìn)中)
2. 再通過透明度的變化，隱藏掉 item-middle 迎面飛來的突兀感
3. 最后，可以通過父元素的濾鏡 hue-rotate 控制圖片的顏色變化

我們嘗試修改 HTML 結(jié)構(gòu)如下：

<div class="g-container"> 
  <div class="g-group"> 
      <div class="item item-right"></div> 
      <div class="item item-left"></div>    
      <div class="item item-top"></div> 
      <div class="item item-bottom"></div>  
      <div class="item item-middle"></div>     
  </div> 
  <!-- 增加一組動畫 --> 
  <div class="g-group"> 
      <div class="item item-right"></div> 
      <div class="item item-left"></div>    
      <div class="item item-top"></div> 
      <div class="item item-bottom"></div>    
      <div class="item item-middle"></div>     
  </div> 
</div> 

修改后的核心 CSS 如下：

.g-container{ 
  perspective: 4px; 
  position: relative; 
  // hue-rotate 變化動畫，可以讓圖片顏色一直變換 
  animation: hueRotate 21s infinite linear; 
} 
 
.g-group{ 
  transform-style: preserve-3d; 
  animation: move 12s infinite linear; 
} 
// 設(shè)置負(fù)的 animation-delay，讓第二組動畫提前進(jìn)行 
.g-group:nth-child(2){ 
  animation: move 12s infinite linear; 
  animation-delay: -6s; 
} 
.item { 
  background: url(https://z3.ax1x.com/2021/08/20/fLwuMd.jpg); 
  background-size: cover; 
  opacity: 1; 
  // 子元素的透明度變化，減少動畫銜接時候的突兀感 
  animation: fade 12s infinite linear; 
  animation-delay: 0; 
} 
.g-group:nth-child(2) .item { 
  animation-delay: -6s; 
} 
@keyframes move { 
  0%{ 
    transform: translateZ(-500px) rotate(0deg); 
  } 
  100%{ 
    transform: translateZ(500px) rotate(0deg); 
  } 
} 
@keyframes fade { 
  0%{ 
    opacity: 0; 
  } 
  25%, 
  60%{ 
    opacity: 1; 
  } 
  100%{ 
    opacity: 0; 
  } 
} 
@keyframes hueRotate { 
  0% { 
    filter: hue-rotate(0); 
  } 
  100% { 
    filter: hue-rotate(360deg); 
  } 
} 

最終完整的效果如下，星空穿梭的效果，整個動畫首尾相連，可以一直無限下去，幾乎沒有破綻，非常的贊：

上述的完整代碼，你可以猛擊這里：CSS 靈感 -- 3D 宇宙時空穿梭效果[3]

這樣，我們就基本還原了上述見到的網(wǎng)易 UU 加速器首頁的動圖背景。

更進(jìn)一步，一個圖片我都不想用

當(dāng)然，這里還是會有讀者吐槽，你這里不也用了一張圖片資源么?沒有那張星空圖行不行?這張圖我也懶得去找。

當(dāng)然可以，CSS YYDS。這里我們嘗試使用 box-shadow，去替換實際的星空圖，也是在一個 div 標(biāo)簽內(nèi)實現(xiàn)，借助了 SASS 的循環(huán)函數(shù)：

<div></div> 

@function randomNum($max, $min: 0, $u: 1) { 
 @return ($min + random($max)) * $u; 
} 
 
@function randomColor() { 
    @return rgb(randomNum(255), randomNum(255), randomNum(255)); 
} 
 
@function shadowSet($maxWidth, $maxHeight, $count) { 
    $shadow : 0 0 0 0 randomColor(); 
     
    @for $i from 0 through $count {          
        $x: #{random(10000) / 10000 * $maxWidth}; 
        $y: #{random(10000) / 10000 * $maxHeight}; 
 
         
        $shadow: $shadow, #{$x} #{$y} 0 #{random(5)}px randomColor(); 
    } 
     
    @return $shadow; 
} 
 
body { 
    background: #000; 
} 
 
div { 
    width: 1px; 
    height: 1px; 
    border-radius: 50%; 
    box-shadow: shadowSet(100vw, 100vh, 500); 
} 

這里，我們用 SASS 封裝了一個函數(shù)，利用多重 box-shadow 的特性，在傳入的大小的高寬內(nèi)，生成傳入個數(shù)的點。

這樣，我們可以得到這樣一幅圖，用于替換實際的星空圖：

我們再把上述這個圖，替換實際的星空圖，主要是替換 .item 這個 class，只列出修改的部分：

// 原 CSS，使用了一張星空圖 
.item { 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  background: url(https://z3.ax1x.com/2021/08/20/fLwuMd.jpg); 
  background-size: cover; 
  animation: fade 12s infinite linear; 
} 
 
// 修改后的 CSS 代碼 
.item { 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  background: #000; 
  animation: fade 12s infinite linear; 
} 
.item::after { 
  content: ""; 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  width: 1px; 
  height: 1px; 
  border-radius: 50%; 
  box-shadow: shadowSet(100vw, 100vh, 500); 
} 

這樣，我們就實現(xiàn)了這樣一個效果，在不借助額外資源的情況下，使用純 CSS 實現(xiàn)上述效果：

CodePen Demo -- Pure CSS Galaxy Shuttle 2[4]

通過調(diào)整動畫的時間，perspective 的值，每組元素的 translateZ() 變化距離，可以得到各種不一樣的觀感和效果，感興趣的讀者可以基于我上述給的 DEMO 自己嘗試嘗試。

最后

好了，本文到此結(jié)束，希望本文對你有所幫助 :)

如果還有什么疑問或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，萬望告知。

參考資料

[1]網(wǎng)易 UU 加速器:

https://uu.163.com/

[2]奇思妙想 CSS 3D 動畫 | 僅使用 CSS 能制作出多驚艷的動畫?:

https://github.com/chokcoco/iCSS/issues/132

[3]CSS 靈感 -- 3D 宇宙時空穿梭效果:

https://csscoco.com/inspiration/#/./3d/3d-css-galaxy-shuttle

[4]CodePen Demo -- Pure CSS Galaxy Shuttle 2:

https://codepen.io/Chokcoco/pen/NWvYOqW