如圖所示，這是一個(gè)炫酷的文本漸變效果，如同冰島的極光一般。本次的文章讓我們逐步分解代碼，了解其實(shí)現(xiàn)原理。

基于以上動(dòng)圖效果可以分析以下是本次動(dòng)效實(shí)現(xiàn)的主要幾點(diǎn)：

• 文本中有多個(gè)顏色的動(dòng)畫
• 每個(gè)顏色顯示的半徑不同，有大有小
• 整體動(dòng)畫是有規(guī)律的重復(fù)進(jìn)行著

實(shí)現(xiàn)過程

接下來開始正式的代碼實(shí)現(xiàn)過程，通過以上可以分析出會(huì)有多個(gè)元素來實(shí)現(xiàn)顏色的動(dòng)畫，每個(gè)元素的動(dòng)畫軌跡和運(yùn)行速度不一致，但當(dāng)多個(gè)不同顏色的元素和文本結(jié)合起來就會(huì)產(chǎn)生一種很美麗的效果，這里的動(dòng)畫元素和文本結(jié)合是用了一個(gè)很重要的屬性，混合模式 mix-blend-mode，對(duì)于混合模式文本不做詳細(xì)介紹，這是一個(gè)很強(qiáng)大的屬性，有興趣的可以了解看看。

CSS中的mix-blend-mode屬性用于控制元素在疊加到其他元素時(shí)的混合模式。它可以應(yīng)用于具有背景色或背景圖片的元素，以改變其與父元素或其他元素的混合方式。它可以創(chuàng)建各種視覺效果和創(chuàng)意設(shè)計(jì)。

布局&樣式

html部分比較簡單，只需要一個(gè)標(biāo)題和多個(gè)動(dòng)畫承載.aurora__item的元素，代碼如下。

  <h1 class="title">CSS文本漸變特效
    <div class="aurora">
      <div class="aurora__item"></div>
      <div class="aurora__item"></div>
      <div class="aurora__item"></div>
      <div class="aurora__item"></div>
    </div>
  </h1>

CSS部分的內(nèi)容首先是變量部分，為了后期更好的調(diào)整相關(guān)參數(shù)和值的復(fù)用我們定義一部分變量可供后續(xù)輕松自定義特效：

:root {
    --bg: #000000;
    --clr-1: #00c2ff;
    --clr-2: #33ff8c;
    --clr-3: #ffc640;
    --clr-4: #e54cff;
    --blur: 1rem;
    --fs: clamp(3rem, 8vw, 7rem);
    --ls: clamp(-1.75px, -0.25vw, -3.5px);
}

這些變量定義了背景顏色--bg和四種不同的顏色--clr-1、--clr-2、--clr-3、--clr-4用于極光特效。其他變量控制模糊程度--blur、字體大小--fs和字間距--ls。

.title設(shè)置了標(biāo)題的字體大小、字體粗細(xì)和字間距。它還設(shè)置了背景顏色，并創(chuàng)建了一個(gè)相對(duì)定位的上下文，用于后續(xù)的極光特效。

.title {
    font-size: var(--fs);
    font-weight: 800;
    letter-spacing: var(--ls);
    position: relative;
    overflow: hidden;
    background: var(--bg);
    margin: 0;
    color: #fff;
}

.aurora元素在.title元素內(nèi)部絕對(duì)定位，并覆蓋了整個(gè)區(qū)域。它設(shè)置了較高的z-index，以確保它顯示在文本上方。mix-blend-mode: darken（選擇兩個(gè)顏色中較暗的部分作為混合結(jié)果）屬性用于將極光特效的顏色與背景混合。

.aurora {
    position: absolute;
    z-index: 2;
    mix-blend-mode: darken;
}

aurora__item表示極光特效的每個(gè)單獨(dú)形狀。它在aurora元素內(nèi)部絕對(duì)定位，并具有60vw（視口寬度的60%）的寬度和高度。每個(gè)形狀具有不同的背景顏色和邊框半徑，創(chuàng)建了獨(dú)特的形狀。filter: blur()屬性為每個(gè)形狀添加了模糊效果：

.aurora__item {
    overflow: hidden;
    position: absolute;
    width: 60vw;
    height: 60vw;
    background-color: var(--clr-1);
    border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    filter: blur(var(--blur));
}

此時(shí)的效果如下，因?yàn)?code>.aurora設(shè)置了較高的z-index，所以文本被遮擋下顏色塊的下方。

此時(shí)再增加混合模式mix-blend-mode: overlay（通過疊加元素和其父元素或其他元素的顏色，產(chǎn)生一種混合效果）將形狀與背景混合。因?yàn)楦讣?jí)設(shè)置mix-blend-mode: darken（選擇兩個(gè)顏色中較暗的部分作為混合結(jié)果），且.title的字體顏色設(shè)置#fff白色，所以較暗的部分就是我們的aurora__item元素，此時(shí)的效果如下：

動(dòng)畫實(shí)現(xiàn)

基于以上的效果進(jìn)一步增加動(dòng)畫的效果，讓這個(gè)字體的漸變效果更加有沖擊感，使用CSS關(guān)鍵幀創(chuàng)建了極光特效。創(chuàng)建了四個(gè)關(guān)鍵幀動(dòng)畫（aurora-1、aurora-2、aurora-3、aurora-4）定義了每個(gè)形狀的移動(dòng)分別對(duì)應(yīng)每個(gè)aurora__item。

.aurora__item:nth-of-type(1) {
    top: -50%;
    animation: aurora-1 12s ease-in-out infinite alternate;
}

每個(gè)關(guān)鍵幀動(dòng)畫使用百分比值指定形狀的初始和最終位置。例如aurora-1將形狀從右上角移動(dòng)到左上角，然后返回。其他關(guān)鍵幀動(dòng)畫為其他形狀定義了類似的移動(dòng)效果。

@keyframes aurora-1 {
    0% {
        top: 0;
        right: 0;
    }
    50% {
        top: 100%;
        right: 75%;
    }
    75% {
        top: 100%;
        right: 25%;
    }
    100% {
        top: 0;
        right: 0;
    }
}

基于移動(dòng)的動(dòng)畫再增加一個(gè)元素邊框半徑變化的動(dòng)畫，創(chuàng)建aurora-border關(guān)鍵幀動(dòng)畫隨時(shí)間改變了每個(gè)形狀的邊框半徑，創(chuàng)建了動(dòng)態(tài)效果。邊框半徑值在不同的百分比上定義，使不同的元素之間的動(dòng)畫平滑過渡。

@keyframes aurora-border {
    0% {
        border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    }
    25% {
        border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%;
    }
    50% {
        border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%;
    }
    75% {
        border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%;
    }
    100% {
        border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    }
}

此時(shí)就完成了整個(gè)文本漸變的動(dòng)畫效果，最后的效果圖如下所示：

在線預(yù)覽

最后

本文解析了通過純 CSS 實(shí)現(xiàn)了一個(gè)如同冰島的極光一般炫酷的文本漸變效果。通過定位和多個(gè)具有不同顏色和邊框半徑值形狀的動(dòng)畫，結(jié)合mix-blend-mode混合模式實(shí)現(xiàn)了這個(gè)特效，并定義了CSS變量可以輕松自定義特效。

只需要修改CSS變量部分就可以自定義不同的文本漸變效果，有興趣的朋友可以嘗試看看~

以上就是使用純CSS實(shí)現(xiàn)動(dòng)態(tài)漸變文本特效的詳細(xì)內(nèi)容，更多關(guān)于CSS動(dòng)態(tài)漸變文本特效的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論