本文主要介绍了web前端CSS | 巧用模糊实现文字的 3D 效果，通过具体的内容向大家展现，希望对大家前端开发CSS的学习有所帮助。

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

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

而在 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);

    }

}

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

第一个字符和最后一个字符在旋转的最左效果和最右效果下分别会离我们最近和最远，它们的效果其实应该是一致的，所以第一个字符和最后一个字符应该统一处理，依次类推，第二个字符和倒数第二字符统一处理，这里可以借助 SASS 利用 :nth-child 和 :nth-last-child 高效编写 CSS 代码

每次有一半是清晰的，一半的是模糊的，需要区分对待，利用 animation-delay 让一半的动画延迟一半进行

可以再配合 text-shadow 让文字更立体点

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

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

我是小职，记得找我

✅ 解锁高薪工作

✅ 免费获取基础课程·答疑解惑·职业测评