妙用 background 實現花式文字效果

ChokCoco發表於2021-09-16

本文將講解如何利用 background 系列屬性,巧妙的實現一些花式的文字效果。通過本文,你將可以學到:

  • 通過 background-sizebackground-position 實現酷炫的文字下劃線效果
  • 通過 background-sizebackground-position 以及 background-clip 實現文字逐個漸現的效果
  • 通過 animation-delay 實現文字的漸現效果

起因

寫本文的動機是在於,某天,被這樣一個標題所吸引 -- 10 Masterfully Designed Websites,其中列舉了 10 個極具創意的 Web 網站。

其中一個 Red Bull Racing 網站,是介紹關於 F1 紅牛車隊的主頁。其中有這樣一個非常有意思的 Hover 動畫效果:

這個文字的 hover 出現效果,看似簡單,其實想要完全實現它,僅僅依靠 CSS 是非常複雜的,其中一個比較難的地方在於 -- 如何讓一個效果,逐漸作用給整段文字中的部分,而不是一次將整個效果賦予整段文字。

利用 background 實現文字的下劃線效果

到這裡,我想起了之前在這篇文章中 -- CSS 文字裝飾 text-decoration & text-emphasis,我介紹的一種 使用 background 模擬下劃線 的效果。

看個簡單的 DEMO,使用 background 模擬文字的下劃線效果:

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <a>Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam</a>, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.</p>
p {
    width: 600px;
    font-size: 24px;
    color: #666;
}
a {
    background: linear-gradient(90deg, #0cc, #0cc);
    background-size: 100% 3px;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    color: #0cc;
}

使用 background 模擬文字的下劃線效果,效果圖如下:

又或者,使用 background 模擬虛線下劃線:

a {
    background: linear-gradient(90deg, #0cc 50%, transparent 50%, transparent 1px);
    background-size: 10px 2px;
    background-repeat: repeat-x;
    background-position: 100% 100%;
}

CodePen Demo -- 使用 background 模擬下劃線與虛線下劃線

當然這個是最基礎的,巧妙的運用 background 的各種屬性,我們實現各種有意思的效果。

巧妙改變 background-sizebackground-position 實現文字 hover 動效

這裡,通過巧妙改變 background-sizebackground-position 屬性,我們可以實現一些非常有意思的文字 hover 效果。

先看這樣一個 Demo,核心程式碼作用於被 <p> 標籤包裹的 <a> 標籤之上:

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <a>Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam</a>, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.</p>
a {
    background: linear-gradient(90deg, #ff3c41, #fc0, #0ebeff);
    background-size: 0 3px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: 1s all;
    color: #0cc;
}

a:hover {
    background-size: 100% 3px;
    color: #000;
}

我們雖然,設定了 background: linear-gradient(90deg, #ff3c41, #fc0, #0ebeff),但是一開始預設它的 background-size: 0 3px,也就是一開始是看不到下劃線的,當 hover 的時候,改變 background-size: 100% 3px,這個時候,就會有一個 0 3px100% 3px 的變換,也就是一個從無到有的伸展效果。

看看最後的效果:

由於設定的 background-position0 100%,如果,設定的 background-position100% 100%,我們可以得到一個反向的效果:

// 其他都保持一致,只改變 background-position,從 0 100% 改為 100% 100%
a {
    ...
    background-position: 100% 100%;
    ...
}

再看看效果,你可以對比著上面的動圖看看具體的差異點在哪:

CodePen Demo -- background underline animation

OK,如果我們使用 background 實現兩條重疊的下劃線,再利用上述的兩個不同的 background-position 值,我們就可以得到一個更有意思的下劃線 hover 效果。

CSS 程式碼示意,注意看兩條使用 background 模擬的下劃線的 background-position 的值是不一樣的:

a {
    background: 
        linear-gradient(90deg, #0cc, #0cc),
        linear-gradient(90deg, #ff3c41, #fc0, #8500d8);
    background-size: 100% 3px, 0 3px;
    background-repeat: no-repeat;
    background-position: 100% 100%, 0 100%;
    transition: 0.5s all;
    color: #0cc;
}
a:hover {
    background-size: 0 3px, 100% 3px;
    color: #000;
}

可以得到這樣一種效果,其實每次 hover, 都有兩條下劃線在移動:

CodePen Demo -- background underline animation

通過 background-sizebackground-position 配合 background-clip 實現文字的漸現

上述一大段都在圍繞 -- 下劃線

迴歸到本文一開始提到的 Gif 效果,我們能否實現在一段文字中,實現文字的漸現效果呢?

上述技巧利用的是 background,那麼 background 背景色能否改變文字的顏色的?答案是可以的,只需要藉助 background-clip

我們稍微改造下程式碼,實現利用 background-clip 實現 hover 的時候部分文字逐漸改變顏色:

<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. 
<a>Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam, </a>
molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.
</p>
p {
    color: #666;
    cursor: pointer;
}

a {    
    background: linear-gradient(90deg, #fc0, #fc0);
    background-size: 0 100px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-clip: text;
    transition: .6s all linear;
}

p:hover a {
    background-size: 100% 100%;
    color: transparent;
}

看看效果,通過 background-clip: text 的遮罩裁剪,我們將 background: linear-gradient(90deg, #fc0, #fc0) 背景色作用給了文字,同時利用 color: transparent 讓文字展示出背景色的色值:

CodePen Demo -- background-size 與 background-position 以及 background-clip 實現文字逐個漸現

當然,稍微對上述程式碼變形,我們就可以演化出幾種不同的效果。

實現整段文字的漸現 - 從透明到出現

第一種就是從透明到有顏色,逐漸展現,這裡我們只需要讓 color 一直是 transparent 即可(下述效果藉助了一個按鈕去觸發效果):

<div class="button">Button</div>
<p><a>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.</a></p>
a {    
    background: linear-gradient(90deg, #fc0, #fc0);
    background-size: 0 100px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    color: transparent;
    background-clip: text;
}
.button:hover ~ p a {
    transition: .8s all linear;
    background-size: 0 100px, 100% 100%;
}

效果如下:

實現整段文字的漸現 - 從一種顏色到另外一種顏色

還可以實現文字從一種顏色到另外一種顏色的逐個轉變,只需要新增多一層 background-image 漸變。

<div class="button">Button</div>
<p><a>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.</a></p>
a {    
    background: 
        linear-gradient(90deg, #999, #999),
        linear-gradient(90deg, #fc0, #fc0);
    background-size: 100% 100%, 0 100px;
    background-repeat: no-repeat;
    background-position: 100% 100%, 0 100%;
    color: transparent;
    background-clip: text;
}
.button:hover ~ p a {
    transition: .8s all linear;
    background-size: 0 100px, 100% 100%;
}

這裡需要解釋一下,雖然設定了 color: transparent,但是文字預設還是有顏色的,預設的文字顏色,是由第一層漸變賦予的 background: linear-gradient(90deg, #999, #999), linear-gradient(90deg, #fc0, #fc0),也就是這一層:linear-gradient(90deg, #999, #999)

當 hover 觸發時,linear-gradient(90deg, #999, #999) 這一層漸變逐漸消失,而另外一層 linear-gradient(90deg, #fc0, #fc0)` 逐漸出現,藉此實現上述效果。

CodePen -- background-clip 文字漸現效果

簡單模擬題圖效果

這裡,我們簡單利用這個技巧模擬一下文章一開始列出的 Gif 的效果:

這個效果原作者的技巧是:

  1. 將每個單詞作為一個物件,包裹一個特殊的 class
  2. 利用 animation-delay 將動畫逐漸賦予每個單詞

這裡,我們將整段文字統一處理,簡單還原:

<div class="button">Button</div>
<p><a>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.</a></p>
/** 動畫核心 background、line-height、opacity **/
a {    
    background: 
        linear-gradient(90deg, #ff5722, #ff5722),
        linear-gradient(90deg, #aaa, #aaa);
    background-size: 100% 100%, 0 100px;
    background-repeat: no-repeat;
    background-position: 100% 100%, 0 100%;
    cursor: pointer;
    color: transparent;
    background-clip: text;
    line-height: 3;
    opacity: 0;
}
.button:hover ~ p a {
    transition: 1.2s background .3s ease-out, .8s line-height ease-out, .6s opacity ease-in;
    background-size: 0 100px, 100% 100%;
    color: transparent;
    line-height: 1;
    opacity: 1;
}
/ ** 簡單控制半透明黑色遮罩出現 **/
a::before {
    content: "";
    position: fixed;
    background: rgba(0, 0, 0, .8);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    transition: .3s all linear;
    opacity: 0;
}
.button:hover ~ p a::before {
    opacity: 1;
}

效果如下:

可以看到,由於是整體控制整段文字,效果上沒有逐個單詞控制的好,但是優點是程式碼量非常少。對於一些簡單卡片類的 hover 場景,足以。

background-image、background-clip 實現文字漸現效果

完美還原題圖效果

當然,題圖效果使用純 CSS 也是不在話下的。只不過就不是簡單能夠統一處理的了。

這裡,我們需要對每一個單詞進行精細化的處理,並且使用每個單詞的偽元素進行額外的動畫。

簡單的結構如下:

<div class="button">Button</div>
<div class="g-wrap"></div>
<p>
    <span data-text="Lorem">Lorem</span> 
    <span data-text="ipsum">ipsum</span> 
    <span data-text="dolor">dolor</span> 
    <span data-text="sit">sit</span> 
    <span data-text="amet">amet</span> 
    // ... 類似結構     
</p>

可以看到,每個單詞都被 <span> 包裹,並且新增了 data-text,方便偽元素拿到當前單詞。

接下來,就是設定動畫,並且通過順序給每個 <span> 新增相應遞增的 animation-delay 以實現沒個單詞動畫的差異性。核心的虛擬碼如下:

p {
    position: relative;
    width: 500px;
    overflow: hidden;
}

p span {
    position: relative;
    display: inline-block;
    opacity: 0;
    transform: translateY(15px) translateZ(0);
    transition-property: transform, opacity;
    transition-duration: .3s, .2s;
}

.button:hover ~ p span {
    opacity: 1;
    color: #ddd;
    transform: translateY(0) translateZ(0);
    transition-duration: 1s, .2s;
}

p span:after,
p span:before {
    position: absolute;
    content: attr(data-text);
    top: 0;
    left: 0;
    z-index: 1;
    transform: translateZ(0);
}

p span:after {
    color: #e62541;
    transition-property: opacity;
    transition-duration: .1s;
}

.button:hover ~ p span:after {
    opacity: 0;
    transition-property: opacity;
    transition-duration: .4s;
}

@for $i from 1 to 21 {
    p span:nth-child(#{$i}) {
        transition-delay: #{$i * 0.04}s;
        
        &::after {
            transition-delay: #{$i * 0.04 + 0.2}s;
        }
    }
}

其實動畫本身不太複雜,主要講兩點:

  1. hover 狀態下和非 hover 狀態下的 transition-duration 是不一樣的,是因為取消 hover 過程中,動畫消失過程的時間通常是要求更短的;
  2. 藉助了 SASS 的迴圈 @for $i from 1 to 21 {} 遞增給每個 span 和它的偽元素新增了遞增的 transition-delay

最終,我們可以得到如下的結果:

完整的程式碼,你可以猛戳 -- CSS 靈感 - 利用 animation-delay 實現文字漸現效果

最後

好了,本文到此結束,希望對你有幫助 ?

想 Get 到最有意思的 CSS 資訊,千萬不要錯過我的公眾號 -- iCSS前端趣聞 ?

更多精彩 CSS 效果可以關注我的 CSS 靈感

更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ,持續更新,歡迎點個 star 訂閱收藏。

如果還有什麼疑問或者建議,可以多多交流,原創文章,文筆有限,才疏學淺,文中若有不正之處,萬望告知。

相關文章