效果展示思路分析层次思路从展示的效果我们可以猜到这个效果由三层文字组成。表面一层黑色文字,中间一层白色文字,最下面一层斑马纹文字。要实现多层文字,首先想到的就是text-shadow,但通常text-shadow只能投射纯色。所以需要转变观念。黑白层是投影,斑马条纹是真实的文本本身。斑马纹思路看到这个条纹效果,想到了背景图的渐变。直接用图片实现斑马纹使用background-image中的线性渐变不推荐第一种思路,因为作为一个追求前端的人,能不用图片就尽量不要用图片!渐变纹理的思路确定后,可以使用background-clip:text来指定将背景图案渲染到文字中。这种方法通常用于文本效果。要将背景渲染到文字中,需要将文字原本的颜色设置为透明,这样才能显示出背景图案。color:transparent;-webkit-text-fill-color:transparent;-webkit-text-fill-color用于指定文字填充颜色,如果-webkit-text-fill-color和color同时出现,-webkit-text-fill-color会覆盖color的颜色。但是-webkit-text-fill-color不是标准属性。之所以写在这里,是怕颜色被其他权重更高的规则覆盖。代码
