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

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

专注于为中小企业提供成都做网站、成都网站制作、成都外贸网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业天元免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上1000家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

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

正文从下面开始~

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

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

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

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

实现一个文字的 3D 变换

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

简单的代码如下：

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

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

实现文字的模糊

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

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

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.     C
    3. 
  
  
  
  
  3.     S
    4. 
  
  
  
  
  4.     S
    5. 
  
  
  
  
  5.     3
    6. 
  
  
  
  
  6.     D
    7. 
  
  
  
  
  7.     E
    8. 
  
  
  
  
  8.     F
    9. 
  
  
  
  
  9.     F
    10. 
  
  
  
  
  10.     E
    11. 
  
  
  
  
  11.     C
    12. 
  
  
  
  
  12.     T
    13. 
  
  
  
  
    14.

 完整的代码大概是这样：

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

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

  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

本文标题：CSS|巧用模糊实现文字的3D效果
当前链接：http://www.mswzjz.cn/qtweb/news21/33071.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能

贝锐智能技术为您推荐以下文章

域名注册知识

分类信息网站

成都租用服务器　　 　成都艺考培训　　 　全网整合营销推广　　 　网站ssl证书　　 　重庆主机托管　　 　柔性防护网　　 　成都app开发　　 　雅安网站建设　　 　成都发电机组维修保养公司　　 　腾讯云香港空间　　 　手机app　　 　温岭熙道网站　　 　佑馨产后护理　　 　光华服务器托管　　 　德阳做网站　　 　德昌麦琪建站　　 　广安园林绿化公司　　 　成都力比特　　 　发光字制作　　 　广东网站设计制作公司