CSS | 巧用模糊实现文字的 3D 效果

[[420213]]

Hello，大家好，我是 Coco。因为发现大家不太喜欢在公众号看长篇大论。

后续会带来新的每日 CSS 系列，力求在 2~5 分钟内讲明白一个小的 CSS 知识点或者动画，希望对你有所帮助。

正文从下面开始~

本文将介绍一种巧用模糊实现的文字 3D 效果。

我们都知道，在正常的视觉效果中，离我们越近的通常我们会看的越清晰，而离我们较远则相对没那么清晰~

我们可以利用清晰与模糊两种状态来构建视差效果。像是这样：

而在 CSS 中，我们可以利用模糊滤镜 filter: blur() 与 transform-style: preserve-3d 来实现它们。

实现一个文字的 3D 变换

首先，我们需要实现一个文字的 3D 变换，这个比较简单。主要是借助 transform-style: preserve-3d 和 perspective，以及让文字绕 Y 轴进行旋转即可。

简单的代码如下：

<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); 
    } 
} 

我们就可以得到这样一个 3D 文字效果：

实现文字的模糊

这个效果已经有了初步的 3D 效果，但是仅仅是这样，会觉得少了些什么。接下来我们就需要补充一下模糊的效果，让距离我们近的文字清晰，远离我们的文字模糊。

但这样就需要对每个文字进行精细化处理，上面的 HTML 结构无法做到对每一个文字的单独处理，我们简单改造一下结构：

<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); 
    } 
} 

简单解析下，这里有几个小技巧，仔细观察我们需要的效果：

1. 第一个字符和最后一个字符在旋转的最左效果和最右效果下分别会离我们最近和最远，它们的效果其实应该是一致的，所以第一个字符和最后一个字符应该统一处理，依次类推，第二个字符和倒数第二字符统一处理，这里可以借助 SASS 利用 :nth-child 和 :nth-last-child 高效编写 CSS 代码
2. 每次有一半是清晰的，一半的是模糊的，需要区分对待，利用 animation-delay 让一半的动画延迟一半进行
3. 可以再配合 text-shadow 让文字更立体点

这样，我们可以最终得到如下效果：

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

最后

好了，本文到此结束，希望对你有帮助 。

参考资料

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

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