CSS教程|一分钟CSS课堂 | 文字故障动画「一丢丢敷衍版」#CSS

如何快速制作一个“yartdata-sc="sc-Studio">sc-Studio</h1>。

随便来个文字，给文字添加伪元素content：attr(data-sc)；position：absolute；

使用clip-path裁切文字。color：rgb(24443133/40%)。clip-path：inset(0 0% 80% 0%)；clip-path：inset()inset在clip-path中用于设置裁剪范围，4个参数时对应上、右、下、左的偏移值，这里不限于使用inset可以使用其他裁剪方式，我们得到大概。这样的效果，为伪元素增加循环动画。

看心情随意添加动画关键帧，目的是调整clip-path的范围让伪元素不规律的运动，同时增加了文字的x轴偏移量产生抖动的效果，我们就得到一个真的很随意的效果。接下来使用同样的方法调整动画参数，再设置一个动画关键帧，只要能让两个伪元素交错不规则运动就好。差不多就是这样。

效果有点奇怪。调整了几次参数也没有达到预期的效果。这里只是给大家做个演示，可以按自己的想法做一个更好的文字故障效果。