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

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

• 文本中有多個顏色的動畫
• 每個顏色顯示的半徑不同，有大有小
• 整體動畫是有規(guī)律的重復進行著

實現(xiàn)過程

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

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

布局&樣式

html部分比較簡單，只需要一個標題和多個動畫承載.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部分的內容首先是變量部分，為了后期更好的調整相關參數(shù)和值的復用我們定義一部分變量可供后續(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設置了標題的字體大小、字體粗細和字間距。它還設置了背景顏色，并創(chuàng)建了一個相對定位的上下文，用于后續(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元素內部絕對定位，并覆蓋了整個區(qū)域。它設置了較高的z-index，以確保它顯示在文本上方。mix-blend-mode: darken（選擇兩個顏色中較暗的部分作為混合結果）屬性用于將極光特效的顏色與背景混合。

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

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

.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));
}

此時的效果如下，因為.aurora設置了較高的z-index，所以文本被遮擋下顏色塊的下方。

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

動畫實現(xiàn)

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

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

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

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

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

@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%;
    }
}

此時就完成了整個文本漸變的動畫效果，最后的效果圖如下所示：

在線預覽

最后

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

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

以上就是使用純CSS實現(xiàn)動態(tài)漸變文本特效的詳細內容，更多關于CSS動態(tài)漸變文本特效的資料請關注腳本之家其它相關文章！