您好,登錄后才能下訂單哦!
這篇文章主要講解了“怎么用CSS創(chuàng)建3D穿梭效果”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“怎么用CSS創(chuàng)建3D穿梭效果”吧!
周末在家習(xí)慣性登陸 Apex,準(zhǔn)備玩幾盤。在登陸加速器的過程中,發(fā)現(xiàn)加速器到期了。
我一直用的騰訊網(wǎng)游加速器,然而點(diǎn)擊充值按鈕,提示最近客戶端升級(jí)改造,暫不支持充值(這個(gè)操作把我震驚了~)。只能轉(zhuǎn)頭下載網(wǎng)易 UU 加速器。
出于對(duì) CSS 的敏感,盲猜了一波這個(gè)用 CSS 實(shí)現(xiàn)的,至少也應(yīng)該是 Canvas。打開控制臺(tái),稍微有點(diǎn)點(diǎn)失望,居然是一個(gè) .mp4
文件:
再看看 Network
面板,這個(gè) .mp4
文件居然需要 3.5M?
emm,瞬間不想打游戲了。這么個(gè)背景圖,CSS 不能搞定么?
假設(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è)子元素,不過仔細(xì)看 CSS 代碼,其中 4 個(gè)子元素都設(shè)置了 rotateX/Y(90deg/-90deg)
,也就是繞 X 軸或者 Y 軸旋轉(zhuǎn)了 90°,在視覺上是垂直屏幕的一張平面,所以直觀視覺上我們是不到的,只能看到一個(gè)平面 .item-middle
。
我將 5 個(gè)子 item 設(shè)置了不同的背景色,結(jié)果如下:
現(xiàn)在看來,好像平平無奇,確實(shí)也是。
不過,見證奇跡的時(shí)候來了,此時(shí),我們給父元素 .g-container
設(shè)置一個(gè)極小的 perspective
,譬如,設(shè)置一個(gè) perspective: 4px
,看看效果:
.g-container { position: relative; + perspective: 4px; } // ...其余樣式保持不變
此時(shí),畫風(fēng)驟變,整個(gè)效果就變成了這樣:
由于 perspective
生效,原本的平面效果變成了 3D 的效果。接下來,我們使用上面準(zhǔn)備好的星空?qǐng)D,替換一下上面的背景顏色,全部都換成同一張圖,神奇的事情發(fā)生了:
由于設(shè)置的 perspective
非常之下,而每個(gè) item 的 transform: translateZ(50px)
設(shè)置的又比較大,所以圖片在視覺上被拉伸的非常厲害。但是整體是充滿整個(gè)屏幕的。
接下來,我們只需要讓視角動(dòng)起來,給父元素增加一個(gè)動(dòng)畫,通過控制父元素的 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); } }
美中不足之處在于,動(dòng)畫沒能無限銜接上,開頭和結(jié)尾都有很大的問題。
當(dāng)然,這難不倒我們,我們可以:
通過疊加兩組同樣的效果,一組比另一組通過負(fù)的 animation-delay
提前行進(jìn),使兩組動(dòng)畫銜接起來(一組結(jié)束的時(shí)候另外一組還在行進(jìn)中)
再通過透明度的變化,隱藏掉 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> <!-- 增加一組動(dòng)畫 --> <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)畫,可以讓圖片顏色一直變換 animation: hueRotate 21s infinite linear; } .g-group{ transform-style: preserve-3d; animation: move 12s infinite linear; } // 設(shè)置負(fù)的 animation-delay,讓第二組動(dòng)畫提前進(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)畫銜接時(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); } }
這樣,我們就基本還原了上述見到的網(wǎng)易 UU 加速器首頁的動(dòng)圖背景。
當(dāng)然,這里還是會(huì)有讀者吐槽,你這里不也用了一張圖片資源么?沒有那張星空?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)上述效果:
感謝各位的閱讀,以上就是“怎么用CSS創(chuàng)建3D穿梭效果”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對(duì)怎么用CSS創(chuàng)建3D穿梭效果這一問題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。