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

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

摘要

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

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

利用 background-clip: text，能够得到很多非常有意思的文字效果。