本篇文章給大家?guī)?lái)了怎樣使用css來(lái)實(shí)現(xiàn)星際3D穿越效果的問(wèn)題，希望對(duì)大家有幫助。

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

這個(gè)技巧，我在 奇思妙想 CSS 3D 動(dòng)畫(huà) | 僅使用 CSS 能制作出多驚艷的動(dòng)畫(huà)？ 也有提及過(guò)，感興趣的可以一并看看。

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

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

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

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

現(xiàn)在看來(lái)，好像平平無(wú)奇，確實(shí)也是。

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

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

此時(shí)，畫(huà)風(fēng)驟變，整個(gè)效果就變成了這樣：

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

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

接下來(lái)，我們只需要讓視角動(dòng)起來(lái)，給父元素增加一個(gè)動(dòng)畫(huà)，通過(guò)控制父元素的 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);   } }

看看，神奇美妙的星空穿梭的效果就出來(lái)了，Amazing：

美中不足之處在于，動(dòng)畫(huà)沒(méi)能無(wú)限銜接上，開(kāi)頭和結(jié)尾都有很大的問(wèn)題。

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

通過(guò)疊加兩組同樣的效果，一組比另一組通過(guò)負(fù)的 animation-delay 提前行進(jìn)，使兩組動(dòng)畫(huà)銜接起來(lái)（一組結(jié)束的時(shí)候另外一組還在行進(jìn)中）

再通過(guò)透明度的變化，隱藏掉 item-middle 迎面飛來(lái)的突兀感

最后，可以通過(guò)父元素的濾鏡 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>   <!-- 增加一組動(dòng)畫(huà) -->   <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 變化動(dòng)畫(huà)，可以讓圖片顏色一直變換   animation: hueRotate 21s infinite linear; } .g-group{   transform-style: preserve-3d;   animation: move 12s infinite linear; } // 設(shè)置負(fù)的 animation-delay，讓第二組動(dòng)畫(huà)提前進(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;   // 子元素的透明度變化，減少動(dòng)畫(huà)銜接時(shí)候的突兀感   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);   } }

最終完整的效果如下，星空穿梭的效果，整個(gè)動(dòng)畫(huà)首尾相連，可以一直無(wú)限下去，幾乎沒(méi)有破綻，非常的贊：

上述的完整代碼，你可以猛擊這里：CSS 靈感 — 3D 宇宙時(shí)空穿梭效果

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

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

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

當(dāng)然可以，CSS YYDS。這里我們嘗試使用 box-shadow，去替換實(shí)際的星空?qǐng)D，也是在一個(gè) div 標(biāo)簽內(nèi)實(shí)現(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 封裝了一個(gè)函數(shù)，利用多重 box-shadow 的特性，在傳入的大小的高寬內(nèi)，生成傳入個(gè)數(shù)的點(diǎn)。

這樣，我們可以得到這樣一幅圖，用于替換實(shí)際的星空?qǐng)D：

我們?cè)侔焉鲜鲞@個(gè)圖，替換實(shí)際的星空?qǐng)D，主要是替換 .item 這個(gè) class，只列出修改的部分：

// 原 CSS，使用了一張星空?qǐng)D .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); }

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

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

（學(xué)習(xí)視頻分享：css視頻教程）