每年的苹果新产品公布，其官网都会配套更新相应的单页滚动产品介绍页。其中的动画特效都十分有意思，往年 iPhone 14 Pro 的介绍页不例外。

最近，刚好有敌人问到，其对官网的一段文字特效特地感兴趣，看实用简略却不知从何下手，咱们来看看：

整个动画大抵是，随着页面的向下滚动，整个文字从无到呈现，再经验一轮渐变色的变动，最初再逐步隐没。

本文，就将介绍 2 种应用 CSS 实现该成果的形式。

应用 background-clip 实现

第一种形式是借助 background-clip。

background-clip：background-clip 设置元素的背景（背景图片或色彩）是否延长到边框、内边距盒子、内容盒子上面。

而 background-clip: text 能够实现背景被裁剪成文字的前景色。应用了这个属性的意思是，以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。

看个最简略的 Demo ，没有应用 background-clip:text :

<div>Clip</div><style>div {  font-size: 180px;  font-weight: bold;  color: deeppink;  background: url($img) no-repeat center center;  background-size: cover;}</style>

成果如下：

CodePen Demo

应用 background-clip:text

咱们略微革新下下面的代码，增加 background-clip:text：

div {  font-size: 180px;  font-weight: bold;  color: deeppink;  background: url($img) no-repeat center center;  background-size: cover;  background-clip: text;}

成果如下：

看到这里，可能有人就纳闷了，，啥玩意呢，这不就是文字设置 color 属性嘛。

将文字设为通明 color: transparent

别急！当然还有更有意思的，下面因为文字设置了色彩，挡住了 div 块的背景，如果将文字设置为通明呢？文字是能够设置为通明的 color: transparent 。

div {  color: transparent;  background-clip: text;}

成果如下：

CodePen Demo - background-clip: text

通过将文字设置为通明，本来 div 的背景就显现出来了，而文字以外的区域全副被裁剪了，这就是 background-clip: text 的作用。

因而，对于上述成果，咱们只须要实现一个从通明到渐变色到通明的突变背景即可，随着鼠标的滚动挪动背景的 background-position 即可！

有了下面的铺垫，咱们很容易的实现上述的苹果官网的文字效果。（先不思考滚动的话）

看看代码：

<div class="g-wrap">    <p>灵动的 iPhone 新玩法，迎面而来。重大的平安新性能，为援救生命而设计。翻新的 4800 万像素主摄，让细节纤毫毕现。更有 iPhone 芯片中的速度之王，为所有提供弱小原动力。      </p></div>
.g-wrap {    background: #000;        p {        width: 800px;        color: transparent;        background: linear-gradient(-4deg, transparent, transparent 25%, #ffb6ff, #b344ff,transparent 75%, transparent);        background-clip: text;        background-size: 100% 400%;        background-position: center 0;        animation: textScroll 6s infinite linear alternate;    }    }@keyframes textScroll {    100% {        background-position: center 100%;    }}

咱们这里外围的就是借助了 linear-gradient(-4deg, transparent, transparent 25%, #ffb6ff, #b344ff,transparent 75%, transparent) 这个突变背景，实现一个从通明到渐变色到通明的突变背景，配合了 background-clip: text。

再利用动画，管制背景的 background-position，这样一个文字渐现再渐隐的文字动画就实现了：

CodePen Demo -- iPhone 14 Pro Text Animation | background-clip: text

应用 mix-blend-mode 实现

下面一种形式很好，这里再介绍另外一种应用混合模式 mix-blend-mode 实现的形式。

假如，咱们先实现这样一幅黑底白字的构造：

<div class="text">灵动的 iPhone 新玩法，迎面而来。重大的平安新性能，为援救生命而设计。翻新的 4800 万像素主摄，让细节纤毫毕现。更有 iPhone 芯片中的速度之王，为所有提供弱小原动力。</div>
.text {    color: #fff;    background: #000;}

再另外实现这样一个突变背景，从彩色到渐变色（#ffb6ff 到 #b344ff）到彩色的渐变色：

<div class="g-wrap">    <div class="text">灵动的 iPhone 新玩法，迎面而来。重大的平安新性能，为援救生命而设计。翻新的 4800 万像素主摄，让细节纤毫毕现。更有 iPhone 芯片中的速度之王，为所有提供弱小原动力。        <div class="bg"></div>    </div></div>
.text {    position: relative;    color: #fff;    background: #000;}.bg {    position: absolute;    top: 0;    left: 0;    right: 0;    width: 100%;    height: 400%;    background: linear-gradient(-3deg, #000, #000 25%, #ffb6ff 30%, #ffb6ff, #b344ff, #b344ff 70%, #000 75%, #000);}

.bg 大略是长这样，绝对于 .text 而言，其高度是其 4 倍：

这两个图形叠加在一起会是咋样？应该不会有太多化学反应：

咱们给 .bg 加上一个高低挪动的动画，咱们看看成果：

如同没什么货色？文字也被挡住了。然而！如果在这里，咱们使用上混合模式，那成果就齐全不一样了，这里，咱们会使用到 mix-blend-mode: darken。

.bg {    //...    mix-blend-mode: darken}

再看看成果：

Wow，借助不同的混合模式，咱们能够实现不同的色彩叠加成果。这里 mix-blend-mode: darken 的作用是，只有红色文字局部会显现出下层的 .bg 的色彩，而彩色背景局部与下层背景叠加的色彩仍旧为彩色，与 background-clip: text 有殊途同归之妙。

再简略的借助 overflow: hidden，裁剪掉 .text 元素外的背景挪动，整个动画就实现了。

残缺的代码如下：

<div class="g-wrap">    <div class="text">灵动的 iPhone 新玩法，迎面而来。重大的平安新性能，为援救生命而设计。翻新的 4800 万像素主摄，让细节纤毫毕现。更有 iPhone 芯片中的速度之王，为所有提供弱小原动力。        <div class="bg"></div>    </div></div>
.g-wrap {    width: 100vw;    height: 100vh;    background: #000;        .text {        position: relative;        color: transparent;        color: #fff;        background: #000;        overflow: hidden;    }            .bg {        position: absolute;        top: 0;        left: 0;        right: 0;        width: 100%;        height: 400%;        background: linear-gradient(-3deg, #000, #000 25%, #ffb6ff 30%, #ffb6ff, #b344ff, #b344ff 70%, #000 75%, #000);        mix-blend-mode: darken;        animation: textScroll 6s infinite linear alternate;    }}@keyframes textScroll {    100% {        transform: translate(0, -75%);    }}

这样，借助混合模式，咱们也实现了题目的文字特效：

CodePen Demo -- iPhone 14 Pro Text Animation | mix-blend-mode

联合滚动实现动画

当然，原动画的实现是联合页面的滚动实现的。

在之前，我介绍了 CSS 最新的个性 @scroll-timeline，譬如这两篇文章：

  • 革命性翻新，动画杀手锏 @scroll-timeline
  • 超酷炫的转场动画？CSS 轻松拿下！

@scroll-timeline 可能设定一个动画的开始和完结由滚动容器内的滚动进度决定，而不是由工夫决定。

意思是，咱们能够定义一个动画成果，该动画的开始和完结能够通过容器的滚动来进行管制。

然而！伤心的是，这个如此好的个性，最近曾经被标准废除，曾经不再举荐应用了：

这里，咱们应用传统的办法，那就必须得借助了 JavaScript 了，JavaScript 联合滚动的局部不是本文的重点，对于页面滚动配合动画时间轴，咱们通常会应用 GSAP。

咱们联合上述的混合模式的办法，很容易失去联合页面滚动的残缺代码：

<div class="g-wrap">    <div class="text">灵动的 iPhone 新玩法，迎面而来。重大的平安新性能，为援救生命而设计。翻新的 4800 万像素主摄，让细节纤毫毕现。更有 iPhone 芯片中的速度之王，为所有提供弱小原动力。        <div class="bg"></div>    </div></div><div class="g-scroll"></div>
.g-wrap {    position: fixed;    top: 0;    left: 0;    display: flex;    width: 100vw;    height: 100vh;    background: #000;        .text {        position: relative;        width: 800px;        color: #fff;        background: #000;        overflow: hidden;    }            .bg {        position: absolute;        top: 0;        left: 0;        right: 0;        width: 100%;        height: 400%;        background: linear-gradient(-3deg, #000, #000 25%, #ffb6ff, #b344ff, #000 75%, #000);        mix-blend-mode: darken;    }}.g-scroll {    position: relative;    width: 100vw;    height: 400vw;}
gsap.timeline({    scrollTrigger: {        trigger: ".g-scroll",        start: "top top",        end: "bottom bottom",        scrub: 1    }}).fromTo(".bg", { y: 0 }, { y: "-75%" }, 0);

能够看到，惟一的不同之处，就是利用了 gsap.timeline 联合滚动容器，触发动画。

成果如下：

CodePen Demo -- iPhone 14 Pro Text Animation | GSAP

最初

好了，本文到此结束，心愿本文对你有所帮忙 :)

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。