每年的蘋(píng)果新產(chǎn)品發(fā)布，其官網(wǎng)都會(huì)配套更新相應(yīng)的單頁(yè)滾動(dòng)產(chǎn)品介紹頁(yè)。其中的動(dòng)畫(huà)特效都非常有意思，今年 iPhone 14 Pro[1] 的介紹頁(yè)不例外。

最近，剛好有朋友問(wèn)到，其對(duì)官網(wǎng)的一段文字特效特別感興趣，看適用簡(jiǎn)單卻不知從何下手，我們來(lái)看看：

整個(gè)動(dòng)畫(huà)大致是，隨著頁(yè)面的向下滾動(dòng)，整個(gè)文字從無(wú)到出現(xiàn)，再經(jīng)歷一輪漸變色的變化，最后再逐漸消失。

本文，就將介紹 2 種使用 CSS 實(shí)現(xiàn)該效果的方式。

使用 background-clip 實(shí)現(xiàn)

第一種方式是借助 background-clip。

background-clip：background-clip 設(shè)置元素的背景（背景圖片或顏色）是否延伸到邊框、內(nèi)邊距盒子、內(nèi)容盒子下面。

而 background-clip: text 可以實(shí)現(xiàn)背景被裁剪成文字的前景色。使用了這個(gè)屬性的意思是，以區(qū)塊內(nèi)的文字作為裁剪區(qū)域向外裁剪，文字的背景即為區(qū)塊的背景，文字之外的區(qū)域都將被裁剪掉。

看個(gè)最簡(jiǎn)單的 Demo ，沒(méi)有使用 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[2]。

使用 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;
}

效果如下：

看到這里，可能有人就納悶了，啥玩意呢，這不就是文字設(shè)置 color 屬性嘛。

將文字設(shè)為透明 color: transparent

別急！當(dāng)然還有更有意思的，上面由于文字設(shè)置了顏色，擋住了 div 塊的背景，如果將文字設(shè)置為透明呢？文字是可以設(shè)置為透明的 color: transparent 。

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

效果如下：

CodePen Demo - background-clip: text[3]。

通過(guò)將文字設(shè)置為透明，原本 div 的背景就顯現(xiàn)出來(lái)了，而文字以外的區(qū)域全部被裁剪了，這就是 background-clip: text 的作用。

因此，對(duì)于上述效果，我們只需要實(shí)現(xiàn)一個(gè)從透明到漸變色到透明的漸變背景即可，隨著鼠標(biāo)的滾動(dòng)移動(dòng)背景的 background-position 即可！

有了上面的鋪墊，我們很容易的實(shí)現(xiàn)上述的蘋(píng)果官網(wǎng)的文字效果。（先不考慮滾動(dòng)的話）

看看代碼：

<div class="g-wrap">
    <p>靈動(dòng)的 iPhone 新玩法，迎面而來(lái)。重大的安全新功能，為拯救生命而設(shè)計(jì)。創(chuàng)新的 4800 萬(wàn)像素主攝，讓細(xì)節(jié)纖毫畢現(xiàn)。更有 iPhone 芯片中的速度之王，為一切提供強(qiáng)大原動(dòng)力。  
    </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) 這個(gè)漸變背景，實(shí)現(xiàn)一個(gè)從透明到漸變色到透明的漸變背景，配合了 background-clip: text。

再利用動(dòng)畫(huà)，控制背景的 background-position，這樣一個(gè)文字漸現(xiàn)再漸隱的文字動(dòng)畫(huà)就實(shí)現(xiàn)了：

CodePen Demo -- iPhone 14 Pro Text Animation | background-clip: text[4]。

使用 mix-blend-mode 實(shí)現(xiàn)

上面一種方式很好，這里再介紹另外一種使用混合模式 mix-blend-mode 實(shí)現(xiàn)的方式。

假設(shè)，我們先實(shí)現(xiàn)這樣一幅黑底白字的結(jié)構(gòu)：

<div class="text">靈動(dòng)的 iPhone 新玩法，迎面而來(lái)。重大的安全新功能，為拯救生命而設(shè)計(jì)。創(chuàng)新的 4800 萬(wàn)像素主攝，讓細(xì)節(jié)纖毫畢現(xiàn)。更有 iPhone 芯片中的速度之王，為一切提供強(qiáng)大原動(dòng)力。
</div>

.text {
    color: #fff;
    background: #000;
}

再另外實(shí)現(xiàn)這樣一個(gè)漸變背景，從黑色到漸變色（#ffb6ff 到 #b344ff）到黑色的漸變色：

<div class="g-wrap">
    <div class="text">靈動(dòng)的 iPhone 新玩法，迎面而來(lái)。重大的安全新功能，為拯救生命而設(shè)計(jì)。創(chuàng)新的 4800 萬(wàn)像素主攝，讓細(xì)節(jié)纖毫畢現(xiàn)。更有 iPhone 芯片中的速度之王，為一切提供強(qiáng)大原動(dòng)力。
        <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 大概是長(zhǎng)這樣，相對(duì)于 .text 而言，其高度是其 4 倍：

這兩個(gè)圖形疊加在一起會(huì)是咋樣？應(yīng)該不會(huì)有太多化學(xué)反應(yīng)：

我們給 .bg 加上一個(gè)上下移動(dòng)的動(dòng)畫(huà)，我們看看效果：

好像沒(méi)什么東西？文字也被擋住了。但是！如果在這里，我們運(yùn)用上混合模式，那效果就完全不一樣了，這里，我們會(huì)運(yùn)用到 mix-blend-mode: darken。

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

再看看效果：

Wow，借助不同的混合模式，我們可以實(shí)現(xiàn)不同的顏色疊加效果。這里 mix-blend-mode: darken 的作用是，只有白色文字部分會(huì)顯現(xiàn)出上層的 .bg 的顏色，而黑色背景部分與上層背景疊加的顏色仍舊為黑色，與 background-clip: text 有異曲同工之妙。

再簡(jiǎn)單的借助 overflow: hidden，裁剪掉 .text 元素外的背景移動(dòng)，整個(gè)動(dòng)畫(huà)就實(shí)現(xiàn)了。

完整的代碼如下：

<div class="g-wrap">
    <div class="text">靈動(dòng)的 iPhone 新玩法，迎面而來(lái)。重大的安全新功能，為拯救生命而設(shè)計(jì)。創(chuàng)新的 4800 萬(wàn)像素主攝，讓細(xì)節(jié)纖毫畢現(xiàn)。更有 iPhone 芯片中的速度之王，為一切提供強(qiáng)大原動(dòng)力。
        <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%);
    }
}

這樣，借助混合模式，我們也實(shí)現(xiàn)了題目的文字特效：

CodePen Demo -- iPhone 14 Pro Text Animation | mix-blend-mode[5]。

結(jié)合滾動(dòng)實(shí)現(xiàn)動(dòng)畫(huà)

當(dāng)然，原動(dòng)畫(huà)的實(shí)現(xiàn)是結(jié)合頁(yè)面的滾動(dòng)實(shí)現(xiàn)的。

在之前，我介紹了 CSS 最新的特性 @scroll-timeline，譬如這兩篇文章：

• 革命性創(chuàng)新，動(dòng)畫(huà)殺手锏 @scroll-timeline[6]。
• 超酷炫的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)？CSS 輕松拿下！[7]。

@scroll-timeline 能夠設(shè)定一個(gè)動(dòng)畫(huà)的開(kāi)始和結(jié)束由滾動(dòng)容器內(nèi)的滾動(dòng)進(jìn)度決定，而不是由時(shí)間決定。

意思是，我們可以定義一個(gè)動(dòng)畫(huà)效果，該動(dòng)畫(huà)的開(kāi)始和結(jié)束可以通過(guò)容器的滾動(dòng)來(lái)進(jìn)行控制。

但是！傷心的是，這個(gè)如此好的特性，最近已經(jīng)被規(guī)范廢棄，已經(jīng)不再推薦使用了：

這里，我們使用傳統(tǒng)的方法，那就必須得借助了 JavaScript 了，JavaScript 結(jié)合滾動(dòng)的部分不是本文的重點(diǎn)，對(duì)于頁(yè)面滾動(dòng)配合動(dòng)畫(huà)時(shí)間軸，我們通常會(huì)使用 GSAP。

我們結(jié)合上述的混合模式的方法，很容易得到結(jié)合頁(yè)面滾動(dòng)的完整代碼：

<div class="g-wrap">
    <div class="text">靈動(dòng)的 iPhone 新玩法，迎面而來(lái)。重大的安全新功能，為拯救生命而設(shè)計(jì)。創(chuàng)新的 4800 萬(wàn)像素主攝，讓細(xì)節(jié)纖毫畢現(xiàn)。更有 iPhone 芯片中的速度之王，為一切提供強(qiáng)大原動(dòng)力。
        <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 結(jié)合滾動(dòng)容器，觸發(fā)動(dòng)畫(huà)。

效果如下：

CodePen Demo -- iPhone 14 Pro Text Animation | GSAP[8]。

最后

好了，本文到此結(jié)束，希望本文對(duì)你有所幫助 :)

參考資料

[1]iPhone 14 Pro: ??https://www.apple.com.cn/iphone-14-pro/。??

[2]CodePen Demo: ??https://codepen.io/Chokcoco/pen/WjOBzB。??

[3]CodePen Demo - background-clip: text: ??https://codepen.io/Chokcoco/pen/oWwRmE。??

[4]CodePen Demo -- iPhone 14 Pro Text Animation | background-clip: text: ??https://codepen.io/Chokcoco/pen/NWMoQXx。??

[5]CodePen Demo -- iPhone 14 Pro Text Animation | mix-blend-mode: ??https://codepen.io/Chokcoco/pen/jOxJLpM。??

[6]革命性創(chuàng)新，動(dòng)畫(huà)殺手锏 @scroll-timeline: ??https://github.com/chokcoco/iCSS/issues/166。??

[7]超酷炫的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)？CSS 輕松拿下！: ??https://github.com/chokcoco/iCSS/issues/191。??

[8]CodePen Demo -- iPhone 14 Pro Text Animation | GSAP: ??https://codepen.io/Chokcoco/pen/GRdzVXK。??

[9]Github -- iCSS: ??https://github.com/chokcoco/iCSS。??