CSS | 巧用模糊实现文字的 3D 效果-码上建站

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

发布时间：2025-11-05 13:24:32 来源：码上建站作者：数据库

Hello，用模大家好，糊实我是现文D效 Coco。因为发现大家不太喜欢在公众号看长篇大论。用模

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

正文从下面开始~

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

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

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

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

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

简单的代码如下：

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

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

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

完整的代码大概是这样：

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

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

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

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

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

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

随便看看