苹果每年新品发布，官网都会更新相应的单页滚动产品介绍页面。动画效果非常有趣，今年的iPhone14Pro介绍页也不例外。最近刚好有朋友问，对官网的一段文字特效特别感兴趣。申请很容易，但他不知道从哪里开始。我们看一下：整个动画大概是，随着页面的向下滚动，整个文字从不出现。直到出现，然后经历一轮渐变色变，最后逐渐消失。在这篇文章中，我将介绍2种使用CSS来实现这种效果的方法。使用背景剪辑第一种方法是使用背景剪辑。background-clip：background-clip设置元素的背景（背景图像或颜色）是否延伸到边框、内边距框和内容框下方。而background-clip:text可以实现将背景裁剪成文字的前景色。使用该属性意味着块中的文本作为裁剪区域向外裁剪，文本的背景为块的背景，文本之外的区域将被裁剪。看最简单的Demo，不使用background-clip:text:
Clip
效果如下：CodePenDemo使用background-clip:text我们稍微修改一下上面的代码，添加background-clip:text:div{font-size:180px;字体粗细：粗体；颜色：深粉色；background:url($img)no-repeatcenter中心；背景尺寸：封面；background-clip:text;}效果如下：看到这里，可能有人会疑惑，，搞什么鬼，这不就是设置文字的color属性吗。将文字设置为透明color:transparent别担心！当然，还有更有趣的。因为上面设置了文字的颜色，遮挡了div块的背景。如果文本设置为透明怎么办？文字为color:transparent可设置为透明。div{颜色：透明；background-clip:text;}效果如下：CodePenDemo-background-clip:text通过设置文本透明，会出现原来div的背景，裁剪除文本以外的区域。这就是background-clip:text所做的。所以，对于上面的效果，我们只需要实现一个从透明到渐变色到透明的渐变背景，随着鼠标的滚动移动背景的background-position即可！有了上面的铺垫，我们就可以轻松实现苹果官网的上述文字效果了。（如果先不考虑滚动的话）看代码：新的智能iPhone玩法来了。旨在挽救生命的主要新安全功能。创新的48兆像素主摄像头让每个细节都脱颖而出。iPhone芯片中还有速度之王，为一切提供强大的驱动力。