利用模糊實(shí)現(xiàn)視覺3D效果實(shí)例講解
本文較短,將介紹巧用模糊實(shí)現(xiàn)視覺 3D 效果的技巧。
我們都知道,在正常的視覺效果中,離我們?cè)浇耐ǔN覀儠?huì)看的越清晰,而離我們較遠(yuǎn)則相對(duì)沒那么清晰~
我們可以利用清晰與模糊兩種狀態(tài)來構(gòu)建視差效果。像是這樣:
而在 CSS 中,我們可以利用模糊濾鏡 filter: blur()
與 transform-style: preserve-3d
來實(shí)現(xiàn)它們。
實(shí)現(xiàn)一個(gè)文字的 3D 變換
首先,我們需要實(shí)現(xiàn)一個(gè)文字的 3D 變換,這個(gè)比較簡單。主要是借助 transform-style: preserve-3d
和 perspective
,以及讓文字繞 Y 軸進(jìn)行旋轉(zhuǎn)即可。
簡單的代碼如下:
<p>CSS3DEFFECT</p>
body { perspective: 160vmin; } p { font-size: 24vmin; transform-style: preserve-3d; animation: rotate 10s infinite ease-in-out; } @keyframes rotate { 0% { transform: rotateY(-45deg); } 50% { transform: rotateY(45deg); } 100% { transform: rotateY(-45deg); } }
我們就可以得到這樣一個(gè) 3D 文字效果:
實(shí)現(xiàn)文字的模糊
這個(gè)效果已經(jīng)有了初步的 3D 效果,但是僅僅是這樣,會(huì)覺得少了些什么。接下來我們就需要補(bǔ)充一下模糊的效果,讓距離我們近的文字清晰,遠(yuǎn)離我們的文字模糊。
但這樣就需要對(duì)每個(gè)文字進(jìn)行精細(xì)化處理,上面的 HTML 結(jié)構(gòu)無法做到對(duì)每一個(gè)文字的單獨(dú)處理,我們簡單改造一下結(jié)構(gòu):
<p> <span>C</span> <span>S</span> <span>S</span> <span>3</span> <span>D</span> <span>E</span> <span>F</span> <span>F</span> <span>E</span> <span>C</span> <span>T</span> </p>
完整的代碼大概是這樣:
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap'); $count: 12; body, html { font-family: 'Lobster', cursive; perspective: 160vmin; overflow: hidden; } p { margin: auto; font-size: 24vmin; transform-style: preserve-3d; animation: rotate 10s infinite ease-in-out; span { text-shadow: 1px 1px 0 rgba(0, 0, 0, .9), 2px 2px 0 rgba(0, 0, 0, .7), 3px 3px 0 rgba(0, 0, 0, .5), 4px 4px 0 rgba(0, 0, 0, .3), 5px 5px 0 rgba(0, 0, 0, .1); &:nth-child(-n+5) { animation-delay: -5s; } } } @for $i from 1 to 7 { span:nth-child(#{$i}), span:nth-last-child(#{$i}) { animation: filterBlur-#{$i} 10s infinite ease-in-out; } @keyframes filterBlur-#{$i} { 0% { filter: blur(0px) contrast(5); } 50% { filter: blur(#{7 - $i}px) contrast(1); } 100% { filter: blur(0px) contrast(5); } } } @keyframes rotate { 0% { transform: rotateY(-45deg); } 50% { transform: rotateY(45deg); } 100% { transform: rotateY(-45deg); } }
簡單解析下,這里有幾個(gè)小技巧,仔細(xì)觀察我們需要的效果:
1.第一個(gè)字符和最后一個(gè)字符在旋轉(zhuǎn)的最左效果和最右效果下分別會(huì)離我們最近和最遠(yuǎn),它們的效果其實(shí)應(yīng)該是一致的,所以第一個(gè)字符和最后一個(gè)字符應(yīng)該統(tǒng)一處理,依次類推,第二個(gè)字符和倒數(shù)第二字符統(tǒng)一處理,這里可以借助 SASS 利用 :nth-child
和 :nth-last-child
高效編寫 CSS 代碼
2.每次有一半是清晰的,一半的是模糊的,需要區(qū)分對(duì)待,利用 animation-delay
讓一半的動(dòng)畫延遲一半進(jìn)行
3.可以再配合 text-shadow
讓文字更立體點(diǎn)
這樣,我們可以最終得到如下效果:
完整的代碼,你可以戳這里 -- CSS 靈感 -- 利用 filter:blur 增強(qiáng)文字的 3D 效果
使用模糊構(gòu)建落葉效果
合理運(yùn)用模糊,是能在沒有 transform-style: preserve-3d
和 perspective
的加持下,也能構(gòu)建出不錯(cuò)的 3D 效果。
之前在 Youtube 的一個(gè)視頻教學(xué)網(wǎng)站看到了下面這個(gè)落葉效果,就是利用模糊以及簡單的層級(jí)關(guān)系,讓整個(gè)畫面看上去非常的真實(shí):
<h2>Falling Leaves</h2> <section> <div class="leaf"> <div><img src="落葉圖片.png" /></div> <div><img src="落葉圖片.png" /></div> <div><img src="落葉圖片.png" /></div> <div><img src="落葉圖片.png" /></div> <div><img src="落葉圖片.png" /></div> <div><img src="落葉圖片.png" /></div> <div><img src="落葉圖片.png" /></div> </div> <div class="leaf leaf2"> // 重復(fù)第二組 </div> <div class="leaf leaf3"> // 重復(fù)第三組 </div> </section>
.leaf { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .leaf img { width: 75px; height: 75px; } .leaf div:nth-child(1) { left: 20%; animation: fall 22s linear infinite; animation-delay: -2s; } .leaf div:nth-child(2) { left: 70%; animation: fall 18s linear infinite; animation-delay: -4s; } .leaf div:nth-child(3) { left: 10%; animation: fall 21s linear infinite; animation-delay: -7s; } .leaf div:nth-child(4) { left: 50%; animation: fall 24s linear infinite; animation-delay: -5s; } .leaf div:nth-child(5) { left: 85%; animation: fall 19s linear infinite; animation-delay: -5s; } .leaf div:nth-child(6) { left: 15%; animation: fall 23s linear infinite; animation-delay: -10s; } .leaf div:nth-child(7) { left: 90%; animation: fall 20s linear infinite; animation-delay: -4s; } .leaf2 { transform: scale(1.6) translate(5%, -5%) rotate(15deg); filter: blur(1px); z-index: 10; } .leaf3 { filter: blur(2px); transform: scale(0.8) translate(-5%, 10%) rotate(170deg); } @keyframes fall { 0% { top: -30%; transform: translateX(20px) rotate(0deg); } 20% { transform: translateX(-20px) rotate(45deg); } 40% { transform: translateX(20px) rotate(90deg); } 60% { transform: translateX(-20px) rotate(135deg); } 80% { transform: translateX(20px) rotate(180deg); } 100% { top: 150%; transform: translateX(-20px) rotate(225deg); } }
主要就是通過清晰與模糊兩種狀態(tài)的對(duì)比,速度的差異,來構(gòu)建視差效果。
CodePen Demo -- Falling leaves
以上就是利用模糊實(shí)現(xiàn)視覺3D效果實(shí)例講解的詳細(xì)內(nèi)容,更多關(guān)于模糊實(shí)現(xiàn)視覺3D的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
利用模糊實(shí)現(xiàn)視覺3D效果實(shí)例講解
這篇文章主要介紹了利用模糊實(shí)現(xiàn)視覺3D效果實(shí)例,文中運(yùn)用代碼和圖片講解相關(guān)知識(shí)非常詳細(xì),感興趣的小伙伴一起來看看吧2021-09-09對(duì)display:inline;與float:left;的認(rèn)識(shí)
對(duì)display:inline;與float:left;的認(rèn)識(shí)...2006-09-09