建站
咨詢
售后
建站咨詢
新聞中心
本文將介紹一種巧用模糊實現(xiàn)的文字 3D 效果。
成都創(chuàng)新互聯(lián)公司是專業(yè)的臨渭區(qū)網(wǎng)站建設公司，臨渭區(qū)接單;提供網(wǎng)站建設、網(wǎng)站制作,網(wǎng)頁設計,網(wǎng)站設計,建網(wǎng)站,PHP網(wǎng)站建設等專業(yè)做網(wǎng)站服務;采用PHP框架,可快速的進行臨渭區(qū)網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!
我們都知道，在正常的視覺效果中，離我們越近的通常我們會看的越清晰，而離我們較遠則相對沒那么清晰~
我們可以利用清晰與模糊兩種狀態(tài)來構建視差效果。像是這樣：
而在 CSS 中，我們可以利用模糊濾鏡 filter: blur() 與 transform-style: preserve-3d 來實現(xiàn)它們。
實現(xiàn)一個文字的 3D 變換
首先，我們需要實現(xiàn)一個文字的 3D 變換，這個比較簡單。主要是借助 transform-style: preserve-3d 和 perspective，以及讓文字繞 Y 軸進行旋轉即可。
簡單的代碼如下：
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);
}
}我們就可以得到這樣一個 3D 文字效果：
實現(xiàn)文字的模糊
這個效果已經(jīng)有了初步的 3D 效果，但是僅僅是這樣，會覺得少了些什么。接下來我們就需要補充一下模糊的效果，讓距離我們近的文字清晰，遠離我們的文字模糊。
但這樣就需要對每個文字進行精細化處理，上面的 HTML 結構無法做到對每一個文字的單獨處理，我們簡單改造一下結構：
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);
}
}簡單解析下，這里有幾個小技巧，仔細觀察我們需要的效果：
- 第一個字符和最后一個字符在旋轉的最左效果和最右效果下分別會離我們最近和最遠，它們的效果其實應該是一致的，所以第一個字符和最后一個字符應該統(tǒng)一處理，依次類推，第二個字符和倒數(shù)第二字符統(tǒng)一處理，這里可以借助 SASS 利用 :nth-child 和 :nth-last-child 高效編寫 CSS 代碼。
- 每次有一半是清晰的，一半的是模糊的，需要區(qū)分對待，利用 animation-delay 讓一半的動畫延遲一半進行。
- 可以再配合 text-shadow 讓文字更立體點。
這樣，我們可以最終得到如下效果：
完整的代碼，你可以戳這里 -- CodePen Demo -- CSS 3D Text Blur Effect[1]。
最后
好了，本文到此結束，希望對你有幫助 。
參考資料
[1]CodePen Demo -- CSS 3D Text Blur Effect: https://codepen.io/Chokcoco/pen/rNwOvNW。
當前文章：巧用模糊實現(xiàn)文字的 3D 效果
文章轉載：http://www.5511xx.com/article/dpjogji.html
