文字烟雾特效纯css 这个是文字烟雾话特效，效果感觉还错，介绍给大家请看下面动画看起来挺炫酷的先看的html结构

这个是文字烟雾话特效，效果感觉还错，介绍给大家请看下面动画

2022-08-03 215748.gif

看起来挺炫酷的先看的html结构很简单就是一个标签可以span 也可以是div随便

    <span>你</span><span>好</span><span>好</span><span>&nbsp;</span><span>好</span><span>好</span><span>呀</span>

文字雾化用到了text-shadow 这个文字字阴影的这个属性

text-shadow: h-shadow v-shadow blur color*; // 水平阴影的位置。允许负值。垂直阴影的位置。允许负值。模糊的距离。阴影的颜色菜鸟文档地址 www.runoob.com/cssref/css3…

我们这个效果主要是运用模糊距离的效果大家可以看一下单纯的模糊效果这个只是 text-shadow: 0 0 5px whitesmoke; 5px的效果 10的就直接看不见了

雾化1.png

在这里我们要配合着 translate 移动，旋转和倾斜这些动作来看，就可以做出动画显示的那些效果了，如

  -webkit-transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
                transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
                text-shadow: 0 0 20px whitesmoke;
                opacity: 0; // 主要是其最后有透明小消失的效果

如果没有这个，最后我们会看到一个斜着的雾化如图

雾化2.png

很难看是不是让他透明还是很有必要的

我们也可以看到它们每个字都是变化是有顺序的不是同时一起这里我们也是用到了动画延迟animation-delay属性这个属性在其实在动画特效这块用的挺多的我也会吧代码块展示出来

我们为了让其有相邻的两个字效果不太一样，用到了 span:nth-child(even) 伪选择器 even偶数 / odd奇数

下面是我的代码块

“我正在参加「创意开发投稿大赛」详情请看：掘金创意开发大赛来了！”

文字烟雾特效 纯css

文字烟雾特效纯css