[[420213]]

Hello，大家好，我是 Coco。因?yàn)榘l(fā)現(xiàn)大家不太喜歡在公眾號(hào)看長(zhǎng)篇大論。

后續(xù)會(huì)帶來(lái)新的每日 CSS 系列，力求在 2~5 分鐘內(nèi)講明白一個(gè)小的 CSS 知識(shí)點(diǎn)或者動(dòng)畫(huà)，希望對(duì)你有所幫助。

正文從下面開(kāi)始~

本文將介紹一種巧用模糊實(shí)現(xiàn)的文字 3D 效果。

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

我們可以利用清晰與模糊兩種狀態(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ì)覺(jué)得少了些什么。接下來(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)一處理，依次類(lèi)推，第二個(gè)字符和倒數(shù)第二字符統(tǒng)一處理，這里可以借助 SASS 利用 :nth-child 和 :nth-last-child 高效編寫(xiě) CSS 代碼
2. 每次有一半是清晰的，一半的是模糊的，需要區(qū)分對(duì)待，利用 animation-delay 讓一半的動(dòng)畫(huà)延遲一半進(jìn)行
3. 可以再配合 text-shadow 讓文字更立體點(diǎn)

這樣，我們可以最終得到如下效果：

完整的代碼，你可以戳這里 -- CodePen Demo -- CSS 3D Text Blur Effect[1]

最后

好了，本文到此結(jié)束，希望對(duì)你有幫助 。

參考資料

[1]CodePen Demo -- CSS 3D Text Blur Effect:

https://codepen.io/Chokcoco/pen/rNwOvNW