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

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

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

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

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

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

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

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

看個最簡單的 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; }

效果如下：

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

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

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

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

效果如下：

CodePen Demo - background-clip: text

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

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

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

看看代碼：

<div class="g-wrap"><p>靈動的 iPhone 新玩法，迎面而來。重大的安全新功能，為拯救生命而設(shè)計。創(chuàng)新的 4800 萬像素主攝，讓細(xì)節(jié)纖毫畢現(xiàn)。更有 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)?這個漸變背景，實現(xiàn)一個從透明到漸變色到透明的漸變背景，配合了?background-clip: text。

再利用動畫，控制背景的?background-position，這樣一個文字漸現(xiàn)再漸隱的文字動畫就實現(xiàn)了：

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

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

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

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

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

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

<div class="g-wrap"><div class="text">靈動的 iPhone 新玩法，迎面而來。重大的安全新功能，為拯救生命而設(shè)計。創(chuàng)新的 4800 萬像素主攝，讓細(xì)節(jié)纖毫畢現(xiàn)。更有 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 倍：

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

我們給?.bg?加上一個上下移動的動畫，我們看看效果：

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

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

再看看效果：

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

再簡單的借助?overflow: hidden，裁剪掉?.text?元素外的背景移動，整個動畫就實現(xiàn)了。

完整的代碼如下：

<div class="g-wrap"><div class="text">靈動的 iPhone 新玩法，迎面而來。重大的安全新功能，為拯救生命而設(shè)計。創(chuàng)新的 4800 萬像素主攝，讓細(xì)節(jié)纖毫畢現(xiàn)。更有 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%);} }

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

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

結(jié)合滾動實現(xiàn)動畫

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

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

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

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

意思是，我們可以定義一個動畫效果，該動畫的開始和結(jié)束可以通過容器的滾動來進(jìn)行控制。

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

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

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

<div class="g-wrap"><div class="text">靈動的 iPhone 新玩法，迎面而來。重大的安全新功能，為拯救生命而設(shè)計。創(chuàng)新的 4800 萬像素主攝，讓細(xì)節(jié)纖毫畢現(xiàn)。更有 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?結(jié)合滾動容器，觸發(fā)動畫。

效果如下：

CodePen Demo -- iPhone 14 Pro Text Animation | GSAP

總結(jié)

以上是生活随笔為你收集整理的超强的苹果官网滚动文字特效实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。