巧用 background-clip 实现超强的文字动效

Python微信订餐小程序课程视频

https://edu.csdn.net/course/detail/36074

Python实战量化交易理财系统

https://edu.csdn.net/course/detail/35475
最近，有同学询问，如何使用 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) ce