這篇文章主要講解了“怎么用CSS創(chuàng)建3D穿梭效果”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么用CSS創(chuàng)建3D穿梭效果”吧！

創(chuàng)新互聯(lián)的團隊成員不追求數(shù)量、追求質(zhì)量。我們經(jīng)驗豐富并且專業(yè)，我們之間合作時就好像一個人，協(xié)同一致毫無保留。成都創(chuàng)新互聯(lián)公司珍視想法，同時也看重過程轉(zhuǎn)化帶來的沖擊力和影響力，在我們眼中，任何細節(jié)都不容小覷。一直致力于為企業(yè)提供從申請域名、網(wǎng)站策劃、網(wǎng)站設(shè)計、成都做商城網(wǎng)站、網(wǎng)站推廣、網(wǎng)站優(yōu)化到為企業(yè)提供個性化軟件開發(fā)等基于互聯(lián)網(wǎng)的全面整合營銷服務(wù)。

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

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

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

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

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

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

假設(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 個子元素，不過仔細看 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;
}
// ...其余樣式保持不變

此時，畫風驟變，整個效果就變成了這樣：

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

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

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

.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);
  }
}

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

當然，這難不倒我們，我們可以：

• 通過疊加兩組同樣的效果，一組比另一組通過負的 animation-delay 提前行進，使兩組動畫銜接起來（一組結(jié)束的時候另外一組還在行進中）

• 再通過透明度的變化，隱藏掉 item-middle 迎面飛來的突兀感

• 最后，可以通過父元素的濾鏡 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è)置負的 animation-delay，讓第二組動畫提前進行
.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);
  }
}

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

更進一步，一個圖片我都不想用

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

當然可以，CSS YYDS。這里我們嘗試使用 box-shadow，去替換實際的星空圖，也是在一個 div 標簽內(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)上述效果：

感謝各位的閱讀，以上就是“怎么用CSS創(chuàng)建3D穿梭效果”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對怎么用CSS創(chuàng)建3D穿梭效果這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

網(wǎng)頁標題：怎么用CSS創(chuàng)建3D穿梭效果
文章路徑：http://jinyejixie.com/article26/pdsocg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、網(wǎng)站制作、網(wǎng)站導(dǎo)航、營銷型網(wǎng)站建設(shè)、虛擬主機、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)