大家好，我是Coco。因为我发现大家不喜欢看公众号上的长篇文章。后续会带来全新的每日CSS系列，力求在2~5分钟内讲解一个CSS小知识点或动画，希望对大家有所帮助。正文从下开始~本文将介绍一个巧妙利用模糊实现的文字3D效果。我们都知道，在正常的视觉效果中，通常离我们越近看得越清楚，而离我们越远则相对越不清晰~我们可以利用清晰和模糊的状态来制作视差效果。像这样：在CSS中，我们可以用模糊滤镜filter:blur()和transform-style:preserve-3d来实现它们。实现文字的3D变换首先，我们要实现文字的3D变换，比较简单。主要使用transform-style:preserve-3d和perspective，让文字绕Y轴旋转。简单代码如下：
CSS3DEFFECT
body{perspective:160vmin;}p{font-size:24vmin;transform-style:preserve-3d;animation:rotate10sinfiniteease-in-out;}@keyframesrotate{0%{transform:rotateY(-45deg);}50%{transform:rotateY(45deg);}100%{transform:rotateY(-45deg);}}我们可以得到这样的3D文字效果：实现模糊的效果文字已经有了初步的3D效果，只是这样，你会觉得少了点什么。接下来，我们需要添加一个模糊效果，让离我们近的文字清晰，离我们远的文字模糊。但这样一来，每一条文字都需要精细处理。上述HTML结构无法单独处理每个文本。我们简单修改一下结构：CSS3DEFFECT
完整的代码大概是这样的：@importurl('https://fonts.googleapis.com/css2?family=Lobster&display=swap');$count:12;body,html{font-family:'Lobster',草书；透视：160vmin；溢出：隐藏；}p{边距：自动；字体大小：24vmin；变换样式：保留3d；动画：旋转10sinfiniteease-in-out；跨度{文本阴影：1px1px0rgba(0,0,0,.9),2px2px0rgba(0,0,0,.7),3px3px0rgba(0,0,0,.5),4px4px0rgba(0,0,0,.3),5px5px0rgba(0,0,0,.1);&:nth-child(-n+5){animation-delay:-5s;}}}@for$ifrom1to7{span:nth-child(#{$i}),span:nth-last-child(#{$i}){animation:filterBlur-#{$i}10sinfiniteease-in-out;}@keyframesfilterBlur-#{$i}{0%{filter:blur(0px)contrast(5);}50%{filter:blur(#{7-$i}px)contrast(1);}100%{filter:blur(0px)contrast(5);}}}@keyframesrotate{0%{transform:rotateY(-45deg);}50%{transform:rotateY(45deg);}100%{transform:rotateY(-45deg);}}简单分析下，这里有几个小技巧，慎重观察我们需要的效果：第一个字符和最后一个字符在旋转的最左和最右效果下会离我们最近和最远，它们的效果应该是一样的，所以要对第一个字符和最后一个字符进行处理统一，以此类推，第二个字符和倒数第二个字符统一处理，这里可以使用SASS使用:nth-child和:nth-last-child高效写CSS代码，每次都清一半，一半其中有一些是模糊的，需要区别对待。使用animation-delay将动画延迟一半，一半可以结合text-shadow让文字更有立体感。这样，我们最终可以得到如下效果：完整代码，可以点这里--CodePenDemo--CSS3DTextBlurEffect[1]最后，本文到此结束，希望对大家有所帮助你。参考资料[1]CodePenDemo--CSS3D文字模糊效果：https://codepen.io/Chokcoco/pen/rNwOvNW