建站
咨詢
售后
建站咨詢
新聞中心
Hello，大家好，我是 Coco。因?yàn)榘l(fā)現(xiàn)大家不太喜歡在公眾號看長篇大論。
專注于為中小企業(yè)提供成都做網(wǎng)站、成都網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)天元免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上1000家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
后續(xù)會帶來新的每日 CSS 系列，力求在 2~5 分鐘內(nèi)講明白一個(gè)小的 CSS 知識點(diǎn)或者動(dòng)畫，希望對你有所幫助。
正文從下面開始~
本文將介紹一種巧用模糊實(shí)現(xiàn)的文字 3D 效果。
我們都知道，在正常的視覺效果中，離我們越近的通常我們會看的越清晰，而離我們較遠(yuǎn)則相對沒那么清晰~
我們可以利用清晰與模糊兩種狀態(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)即可。
簡單的代碼如下：
CSS3DEFFECT
- 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 效果，但是僅僅是這樣，會覺得少了些什么。接下來我們就需要補(bǔ)充一下模糊的效果，讓距離我們近的文字清晰，遠(yuǎn)離我們的文字模糊。
但這樣就需要對每個(gè)文字進(jìn)行精細(xì)化處理，上面的 HTML 結(jié)構(gòu)無法做到對每一個(gè)文字的單獨(dú)處理，我們簡單改造一下結(jié)構(gòu)：
- C
- S
- S
- 3
- D
- E
- F
- F
- E
- C
- T
完整的代碼大概是這樣：
- @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ì)觀察我們需要的效果：
- 第一個(gè)字符和最后一個(gè)字符在旋轉(zhuǎn)的最左效果和最右效果下分別會離我們最近和最遠(yuǎn)，它們的效果其實(shí)應(yīng)該是一致的，所以第一個(gè)字符和最后一個(gè)字符應(yīng)該統(tǒng)一處理，依次類推，第二個(gè)字符和倒數(shù)第二字符統(tǒng)一處理，這里可以借助 SASS 利用 :nth-child 和 :nth-last-child 高效編寫 CSS 代碼
- 每次有一半是清晰的，一半的是模糊的，需要區(qū)分對待，利用 animation-delay 讓一半的動(dòng)畫延遲一半進(jìn)行
- 可以再配合 text-shadow 讓文字更立體點(diǎn)
這樣，我們可以最終得到如下效果：
完整的代碼，你可以戳這里 --CodePen Demo -- CSS 3D Text Blur Effect[1]
最后
好了，本文到此結(jié)束，希望對你有幫助 。
參考資料
[1]CodePen Demo -- CSS 3D Text Blur Effect:
https://codepen.io/Chokcoco/pen/rNwOvNW
網(wǎng)站欄目：CSS|巧用模糊實(shí)現(xiàn)文字的3D效果
分享鏈接：http://www.5511xx.com/article/cdsgesp.html
