偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

CSS | 巧用模糊實現(xiàn)文字的 3D 效果

開發(fā) 前端
我們都知道,在正常的視覺效果中,離我們越近的通常我們會看的越清晰,而離我們較遠(yuǎn)則相對沒那么清晰,本文將介紹一種巧用模糊實現(xiàn)的文字 3D 效果。

[[420213]]

Hello,大家好,我是 Coco。因為發(fā)現(xiàn)大家不太喜歡在公眾號看長篇大論。

后續(xù)會帶來新的每日 CSS 系列,力求在 2~5 分鐘內(nèi)講明白一個小的 CSS 知識點或者動畫,希望對你有所幫助。

正文從下面開始~

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

我們都知道,在正常的視覺效果中,離我們越近的通常我們會看的越清晰,而離我們較遠(yuǎn)則相對沒那么清晰~

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

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

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

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

簡單的代碼如下:

  1. <p>CSS3DEFFECT</p> 
  1. body { 
  2.     perspective: 160vmin; 
  3.  
  4. p { 
  5.     font-size: 24vmin; 
  6.     transform-style: preserve-3d; 
  7.     animation: rotate 10s infinite ease-in-out
  8.  
  9. @keyframes rotate { 
  10.     0% { 
  11.         transform: rotateY(-45deg); 
  12.     } 
  13.     50% { 
  14.         transform: rotateY(45deg); 
  15.     } 
  16.     100% { 
  17.         transform: rotateY(-45deg); 
  18.     } 

我們就可以得到這樣一個 3D 文字效果:

圖片

實現(xiàn)文字的模糊

這個效果已經(jīng)有了初步的 3D 效果,但是僅僅是這樣,會覺得少了些什么。接下來我們就需要補(bǔ)充一下模糊的效果,讓距離我們近的文字清晰,遠(yuǎn)離我們的文字模糊。

但這樣就需要對每個文字進(jìn)行精細(xì)化處理,上面的 HTML 結(jié)構(gòu)無法做到對每一個文字的單獨處理,我們簡單改造一下結(jié)構(gòu):

  1. <p> 
  2.     <span>C</span> 
  3.     <span>S</span> 
  4.     <span>S</span> 
  5.     <span>3</span> 
  6.     <span>D</span> 
  7.     <span>E</span> 
  8.     <span>F</span> 
  9.     <span>F</span> 
  10.     <span>E</span> 
  11.     <span>C</span> 
  12.     <span>T</span> 
  13. </p> 

 完整的代碼大概是這樣:

  1. @import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap'); 
  2.  
  3. $count: 12; 
  4.  
  5. body, html { 
  6.     font-family: 'Lobster', cursive; 
  7.     perspective: 160vmin; 
  8.     overflow: hidden; 
  9.  
  10. p { 
  11.     margin: auto; 
  12.     font-size: 24vmin; 
  13.     transform-style: preserve-3d; 
  14.     animation: rotate 10s infinite ease-in-out
  15.      
  16.     span { 
  17.         text-shadow:  
  18.             1px 1px 0 rgba(0, 0, 0, .9), 
  19.             2px 2px 0 rgba(0, 0, 0, .7), 
  20.             3px 3px 0 rgba(0, 0, 0, .5), 
  21.             4px 4px 0 rgba(0, 0, 0, .3), 
  22.             5px 5px 0 rgba(0, 0, 0, .1); 
  23.          
  24.         &:nth-child(-n+5) {  
  25.             animation-delay: -5s;  
  26.         } 
  27.     } 
  28.  
  29. @for $i from 1 to 7 { 
  30.     span:nth-child(#{$i}),  
  31.     span:nth-last-child(#{$i}) { 
  32.         animation: filterBlur-#{$i} 10s infinite ease-in-out
  33.     } 
  34.  
  35.     @keyframes filterBlur-#{$i} { 
  36.         0% { 
  37.             filter: blur(0px) contrast(5); 
  38.         } 
  39.         50% { 
  40.             filter: blur(#{7 - $i}px) contrast(1); 
  41.         } 
  42.         100% { 
  43.             filter: blur(0px) contrast(5); 
  44.         } 
  45.     } 
  46. @keyframes rotate { 
  47.     0% { 
  48.         transform: rotateY(-45deg); 
  49.     } 
  50.     50% { 
  51.         transform: rotateY(45deg); 
  52.     } 
  53.     100% { 
  54.         transform: rotateY(-45deg); 
  55.     } 

簡單解析下,這里有幾個小技巧,仔細(xì)觀察我們需要的效果:

  1. 第一個字符和最后一個字符在旋轉(zhuǎn)的最左效果和最右效果下分別會離我們最近和最遠(yuǎn),它們的效果其實應(yīng)該是一致的,所以第一個字符和最后一個字符應(yīng)該統(tǒng)一處理,依次類推,第二個字符和倒數(shù)第二字符統(tǒng)一處理,這里可以借助 SASS 利用 :nth-child 和 :nth-last-child 高效編寫 CSS 代碼
  2. 每次有一半是清晰的,一半的是模糊的,需要區(qū)分對待,利用 animation-delay 讓一半的動畫延遲一半進(jìn)行
  3. 可以再配合 text-shadow 讓文字更立體點

這樣,我們可以最終得到如下效果:

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

最后

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

參考資料

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

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

 

責(zé)任編輯:姜華 來源: iCSS前端趣聞
相關(guān)推薦

2023-05-26 07:08:05

CSS模糊實現(xiàn)文字

2021-11-08 06:02:17

CSS 技巧代碼重構(gòu)

2021-09-16 07:52:18

SwiftUScroll效果

2013-01-30 16:15:40

adobeHTML5css3

2011-09-07 10:00:53

Ubuntu3D

2012-07-18 20:59:40

jQuery

2025-05-29 06:48:51

前端偽3D

2021-06-09 08:30:52

CSS33D旋轉(zhuǎn)視圖3D動畫

2010-06-09 16:21:10

OpenSUSE界面

2021-01-05 08:10:00

Css前端3D旋轉(zhuǎn)透視

2010-09-13 14:09:35

CSS文字

2009-05-13 08:13:37

SUSELinux 10.3Nvidia

2012-06-16 16:57:52

WebGL

2010-01-04 15:17:52

Ubuntu啟動

2012-02-24 09:11:45

jQuery

2021-06-18 05:59:37

Css前端CSS 特效

2017-07-11 15:00:04

前端CSS3D視角

2009-04-03 08:33:59

Symbian諾基亞Photo Brows

2010-06-09 10:13:40

OpenSUSE 3D

2011-05-26 10:55:39

點贊
收藏

51CTO技術(shù)棧公眾號