草庐IT

background-origin

全部标签

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

最近,有同学询问,如何使用CSS实现如下效果:看起来是个很有意思的动效。仔细思考一下,要想实现这类效果,其实用到的核心属性只有一个--background-clip:text。有意思的background-clip:textbackground-clip:text之前也提到多很多次。其核心就在于以区块内的文字作为裁剪区域向外裁剪,文字的背景即为区块的背景,文字之外的区域都将被裁剪掉。简单而言,就是运用了background-clip:text的元素,其背景内容只保留文字所在区域部分,配合透明文字color:transparent,就能够利用文字透出背景。利用background-clip:te

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

最近,有同学询问,如何使用CSS实现如下效果:看起来是个很有意思的动效。仔细思考一下,要想实现这类效果,其实用到的核心属性只有一个--background-clip:text。有意思的background-clip:textbackground-clip:text之前也提到多很多次。其核心就在于以区块内的文字作为裁剪区域向外裁剪,文字的背景即为区块的背景,文字之外的区域都将被裁剪掉。简单而言,就是运用了background-clip:text的元素,其背景内容只保留文字所在区域部分,配合透明文字color:transparent,就能够利用文字透出背景。利用background-clip:te