最近有同学问如何用CSS实现如下效果：看起来很有趣的动画。仔细想想，要达到这种效果，核心属性只有一个——background-clip：text。有趣的background-clip:textbackground-clip:text之前也提到过很多次。其核心是将块内的文字作为裁剪区域向外裁剪，文本的背景为块的背景，文本以外的区域将被裁剪。简单来说就是使用了background-clip:text元素，背景内容只保留文字所在的区域。带透明文字颜色：透明，文字可用来显露背景。使用background-clip:text，可以得到很多非常有趣的文字效果。假设我们有这样一个Gif图片：我们可以用这个动画和文字来实现一个文字版的动画：
Lorem......
p{color:transparent;背景：网址（https://media.giphy.com/media/Ju7l5y9osyymQ/giphy.gif）中心/封面；background-clip:text;}我们实现了这样的效果：Interesting,CodePenDemo--RickRollKnockoutText[1]。以上效果和思路可以应用到初始效果：实现一个背景动画。将鼠标悬停在文本上时，使文本透明。让动画开始。我们首先需要实现一个移动的条纹背景动画。有很多方法。在这里，我将repeating-radial-gradient与CSS@property一起使用：@property--offset{syntax:'元素的背景：有了移动效果后，我们稍微修改一下代码，使用background-clip:text，结合
元素的hover效果。悬停时，将文本从#000设置为透明transparent:...p{color:#000;&:hover{颜色：透明；背景：重复径向渐变（在00处画圆，#000calc（var（--offset）-5px），#000var（--offset），#fffvar（--offset），#fffcalc（var(--偏移量)+5px));背景剪辑：文本；动画：移动.5s无限线ar;}}...这样，我们就成功得到了如题图所示的效果：CodePenDemo--BackgroundClipWaveText[2]结合滤镜和混合模式，碰撞出不一样的火花结束了吗？不！有了上面的铺垫，我们继续进一步尝试，CSS有两个很有意思的属性，filter和mixmodemix-blend-mode。我们考虑在我们的效果中使用它们。还是这张Gif图：我们先通过滤镜filter将它从彩色处理成黑白灰：grayscale(1):p{background:url(xxx);filter:grayscale(1);}处理后的图片大概会是这样的：在一张黑白背景图片的基础上，我们再使用background-clip:text，再使用blendmodemix-blend-mode:hard-光，而且，非常重要的是，我们使用这个效果把它放在黑色背景上：body{background:#000;}p{color:transparent;背景：url(xxx)中心/封面；背景剪辑：文本；过滤器：灰度（1）；mix-blend-mode:hard-light;}会得到这样神奇的效果，通过混合模式的叠加处理，保留文字亮部，暗部与黑色背景融合：这里，混合模式mix-blend-mode：Hard-light起着非常重要的作用。去掉的话是这样的结果：当然，我们更想要的是人的部分保留下来，gif图片的背景部分隐藏起来，完美！在这里，我们继续对代码进行优化，我们希望将原图经过grayscale()处理后的明暗部分进行替换。恰好在filter中，有一个invert()函数，可以将输入图像的颜色值进行反转。因此，在grayscale()之后，再次使用invert(1)函数：body{background:#000;}p{color:transparent;背景：url(xxx)中心/封面；背景剪辑：文本；过滤器：灰度（1）反转（1）；mix-blend-mode:hard-light;}OK，至此，我们已经用纯CSS实现了如此不可思议的文字效果：CodePenDemo-Filter&MixBlendMode&BackgroundClipTextAnimationEffect[3]。使用这个技巧，只要我们有素材，就可以尽情发挥我们的想象力，做出各种相似有趣的效果。最后，本文到此结束，希望对大家有所帮助：）参考文献[1]CodePenDemo--RickRollKnockout文：https://codepen.io/Chokcoco/pen/GRyEodO。[2]CodePenDemo--BackgroundClipWave文本：https://codepen.io/Chokcoco/pen/KKZmRQE。[3]CodePenDemo-Filter&MixBlendMode&BackgroundClip文字动画效果：https://codepen.io/Chokcoco/pen/YzYQQGM?editors=1100。