目錄

• 實(shí)現(xiàn)一個(gè)文字的 3D 變換
• 實(shí)現(xiàn)文字的模糊
• 使用模糊構(gòu)建落葉效果

本文較短，將介紹巧用模糊實(shí)現(xiàn)視覺 3D 效果的技巧。

我們都知道，在正常的視覺效果中，離我們?cè)浇耐ǔＮ覀儠?huì)看的越清晰，而離我們較遠(yuǎn)則相對(duì)沒那么清晰~

我們可以利用清晰與模糊兩種狀態(tài)來(lái)構(gòu)建視差效果。像是這樣：

而在 CSS 中，我們可以利用模糊濾鏡 filter: blur() 與 transform-style: preserve-3d 來(lái)實(shí)現(xiàn)它們。

實(shí)現(xiàn)一個(gè)文字的 3D 變換

首先，我們需要實(shí)現(xiàn)一個(gè)文字的 3D 變換，這個(gè)比較簡(jiǎn)單。主要是借助 transform-style: preserve-3d 和 perspective，以及讓文字繞 Y 軸進(jìn)行旋轉(zhuǎn)即可。

簡(jiǎ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ì)覺得少了些什么。接下來(lái)我們就需要補(bǔ)充一下模糊的效果，讓距離我們近的文字清晰，遠(yuǎn)離我們的文字模糊。

但這樣就需要對(duì)每個(gè)文字進(jìn)行精細(xì)化處理，上面的 HTML 結(jié)構(gòu)無(wú)法做到對(duì)每一個(gè)文字的單獨(dú)處理，我們簡(jiǎn)單改造一下結(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);    }}

簡(jiǎn)單解析下，這里有幾個(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è)落葉效果，就是利用模糊以及簡(jiǎn)單的層級(jí)關(guān)系，讓整個(gè)畫面看上去非常的真實(shí)：

<h2>Falling Leaves</h2><section>  <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><img src="落葉圖片.png" /></div>  </div>  <div>    // 重復(fù)第二組  </div>  <div>    // 重復(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);  }}

主要就是通過(guò)清晰與模糊兩種狀態(tài)的對(duì)比，速度的差異，來(lái)構(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)文章！