純CSS動態漸變文本特效详情 - 前端,css,css3,動畫,程序員南城FE 日志

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

基於以上動圖效果可以分析以下是本次動效實現的主要幾點：

文本中有多個顏色的動畫
每個顏色顯示的半徑不同，有大有小
整體動畫是有規律的重複進行着

實現過程

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

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

佈局&樣式

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部分的內容首先是變量部分，為了後期更好的調整相關參數和值的複用我們定義一部分變量可供後續輕鬆自定義特效：

: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設置了標題的字體大小、字體粗細和字間距。它還設置了背景顏色，並創建了一個相對定位的上下文，用於後續的極光特效。

.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元素內部絕對定位，並覆蓋了整個區域。它設置了較高的z-index，以確保它顯示在文本上方。mix-blend-mode: darken（選擇兩個顏色中較暗的部分作為混合結果）屬性用於將極光特效的顏色與背景混合。

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

aurora__item表示極光特效的每個單獨形狀。它在aurora元素內部絕對定位，並具有60vw（視口寬度的60%）的寬度和高度。每個形狀具有不同的背景顏色和邊框半徑，創建了獨特的形狀。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（通過疊加元素和其父元素或其他元素的顏色，產生一種混合效果）將形狀與背景混合。因為父級設置mix-blend-mode: darken（選擇兩個顏色中較暗的部分作為混合結果），且.title的字體顏色設置#fff白色，所以較暗的部分就是我們的aurora__item元素，此時的效果如下：

動畫實現

基於以上的效果進一步增加動畫的效果，讓這個字體的漸變效果更加有衝擊感，使用CSS關鍵幀創建了極光特效。創建了四個關鍵幀動畫（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;
    }
}

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

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

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