关于前端:巧用-backgroundclip-实现超强的文字动效

最近，有同学询问，如何应用 CSS 实现如下成果：

看起来是个很有意思的动效。

认真思考一下，要想实现这类成果，其实用到的外围属性只有一个 — background-clip: text。

有意思的 background-clip: text

background-clip: text 之前也提到多很屡次。其外围就在于以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。

简略而言，就是使用了 background-clip: text 的元素，其背景内容只保留文字所在区域局部，配合通明文字 color: transparent，就可能利用文字透出背景。

利用 background-clip: text，可能失去很多十分有意思的文字效果。

假如，咱们有这样一个 Gif 图：

咱们能够利用这张动图和文字，实现一版，文字版的动图：

<p>Lorem ......</p>

p {
  color: transparent;
  background: url(https://media.giphy.com/media/Ju7l5y9osyymQ/giphy.gif) center/cover;
  background-clip: text;
}

咱们就实现了这样一个成果：

有点意思，CodePen Demo — Rick Roll Knockout Text

上述成果及思路作用于一开始的成果即可：

1. 实现一个背景动画
2. 当 hover 到文字的时候，让文字通明
3. 让动画开始

咱们首先须要实现一个会动的条纹背景动画，办法有很多，我这里利用了 repeating-radial-gradient 配合 CSS @property：

<p></p>

@property --offset {
  syntax: '<length>';
  inherits: false;
  initial-value: 5px;
}
p {background: repeating-radial-gradient(circle at 0 0 , #000 calc(var(--offset) - 5px), #000 var(--offset), #fff var(--offset), #fff calc(var(--offset) + 5px));
    animation: move .5s infinite linear;
}
@keyframes move {
    to {--offset: 15px;}
}

会失去这样一幅变幻动画的条纹图：

当然，如果感觉应用 CSS 实现一个动图比拟麻烦或者会存在兼容性问题，也能够应用一些现成的 Gif 图代替，譬如这样一个 Gif 图作为 <p> 元素的背景：

有了会动的成果之后，咱们略微革新下代码，使用上 background-clip: text，并且联合 <p> 元素的 hover 成果，在 hover 的时候，把文字从 #000 设置为通明 transparent：

...
p {
    color: #000;
    
    &:hover {
        color: transparent;
        background: repeating-radial-gradient(circle at 0 0 , #000 calc(var(--offset) - 5px), #000 var(--offset), #fff var(--offset), #fff calc(var(--offset) + 5px));
        background-clip: text;
        animation: move .5s infinite linear;
    }
}
...

这样，咱们就胜利的失去了题图所示的成果了：

CodePen Demo — BackgroundClip Wave Text

联合滤镜与混合模式，碰撞出不一样的火花

完结了吗？没有！

有了上述的铺垫，咱们持续进一步的尝试，CSS 有两个十分有意思的属性，滤镜 filter 与混合模式 mix-blend-mode。咱们思考把它们作用于咱们的成果中。

还是这张 Gif 图：

咱们首先通过滤镜 filter: grayscale(1)，将他从黑白的，解决成黑白灰的：

p {background: url(xxx);
    filter: grayscale(1);
}

解决后的图片，大略会是这样：

基于一张黑白底色的图片，咱们再使用 background-clip: text，再通过混合模式 mix-blend-mode: hard-light，并且，很重要的一点，咱们把这个成果放在彩色的背景之上：

body {background: #000;}
p {
  color: transparent;
  background: url(xxx) center/cover;
  background-clip: text;
  filter: grayscale(1);
  mix-blend-mode: hard-light;
}

将会失去这样一种神奇的成果，通过混合模式的叠加解决，文字的亮部将会保留，而暗部则会与彩色背景交融：

这里，混合模式 mix-blend-mode: hard-light 施展了十分重要的作用，去掉的话，是这样的后果：

当然，咱们更心愿的是，人的局部展现保留，而 Gif 图片中的背景局部被暗藏，就完满了！

这里，咱们持续优化下代码，咱们心愿能把被 grayscale() 解决过的原图的明暗局部置换，刚好，在 filter 中，存在一个 invert() 函数，可能反转输出图像的色值。

因而，在 grayscale() 之后，再配合一次 invert(1) 函数：

body {background: #000;}
p {
  color: transparent;
  background: url(xxx) center/cover;
  background-clip: text;
  filter: grayscale(1) invert(1);
  mix-blend-mode: hard-light;
}

OK，至此，咱们利用纯 CSS 实现了这样一种 unbelievable 的文字效果：

CodePen Demo – Filter & MixBlendMode & BackgroundClip Text Animation Effect

利用这个技巧，只有有素材，咱们就能放飞设想，实现各种相似的有意思的成果。

最初

好了，本文到此结束，心愿对你有帮忙 :)

想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 😄

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。