今天我們來創建一個炫酷的漸變文字填充動畫，文字像被液體逐漸填充一樣，結合漸變和動畫效果。

實現思路

  1. 使用CSS linear-gradient 創建漸變背景
  2. 通過 background-clip: text 實現文字漸變
  3. 利用 @keyframes 動畫控制背景位置
  4. 添加多層陰影增強立體感

下面是完整的實現代碼：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>漸變文字填充動畫 - 每天一個CSS小樣式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }
        
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            background: #0a0a1a;
            color: white;
            padding: 20px;
        }
        
        .header {
            text-align: center;
            margin-bottom: 50px;
        }
        
        h1 {
            font-size: 2.8rem;
            margin-bottom: 20px;
        }
        
        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 40px;
            max-width: 1000px;
        }
        
        .demo-box {
            text-align: center;
            padding: 20px;
        }
        
        /* 漸變文字填充效果 */
        .gradient-text {
            font-size: 4rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 20px;
            display: inline-block;
        }
        
        /* 效果1：基礎填充動畫 */
        .effect-1 {
            background: linear-gradient(90deg, 
                #ff0080 0%, 
                #ff0080 50%, 
                transparent 50%, 
                transparent 100%);
            background-size: 200% 100%;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: fill-effect-1 3s infinite alternate;
        }
        
        /* 效果2：雙色流動填充 */
        .effect-2 {
            background: linear-gradient(90deg, 
                #ff0080 0%, 
                #00ffcc 50%, 
                #ff0080 100%);
            background-size: 200% auto;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: fill-effect-2 4s infinite linear;
        }
        
        /* 效果3：霓虹填充 */
        .effect-3 {
            background: linear-gradient(90deg, 
                #ff0080, #ff6600, #ffcc00, #00ffcc, #0099ff, #6600ff);
            background-size: 300% 100%;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: fill-effect-3 5s infinite alternate;
            text-shadow: 0 0 10px rgba(255, 0, 128, 0.3);
        }
        
        /* 效果4：閃爍填充 */
        .effect-4 {
            background: linear-gradient(90deg, 
                #00ffcc 0%, 
                #00ffcc 25%, 
                transparent 25%, 
                transparent 75%, 
                #00ffcc 75%, 
                #00ffcc 100%);
            background-size: 200% 100%;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: fill-effect-4 2s infinite alternate;
        }
        
        /* 動畫定義 */
        @keyframes fill-effect-1 {
            0% {
                background-position: 100% 0;
            }
            100% {
                background-position: 0 0;
            }
        }
        
        @keyframes fill-effect-2 {
            0% {
                background-position: 0% 50%;
            }
            100% {
                background-position: 200% 50%;
            }
        }
        
        @keyframes fill-effect-3 {
            0% {
                background-position: 0% 50%;
            }
            100% {
                background-position: 100% 50%;
            }
        }
        
        @keyframes fill-effect-4 {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: 100% 0;
            }
        }
        
        /* 説明區域 */
        .code-block {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            padding: 20px;
            margin-top: 40px;
            max-width: 800px;
            border-left: 3px solid #00ffcc;
        }
        
        .code-block h3 {
            color: #00ffcc;
            margin-bottom: 10px;
        }
        
        .code-block pre {
            color: #ccc;
            font-size: 0.9rem;
        }
        
        .footer {
            margin-top: 40px;
            text-align: center;
            color: #888;
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>漸變文字填充動畫</h1>
        <p style="color: #aaa; max-width: 600px;">使用CSS漸變和動畫創建文字填充效果，無需JavaScript</p>
    </div>
    
    <div class="container">
        <div class="demo-box">
            <div class="gradient-text effect-1">CSS</div>
            <p style="color: #aaa;">基礎填充動畫</p>
        </div>
        
        <div class="demo-box">
            <div class="gradient-text effect-2">STYLE</div>
            <p style="color: #aaa;">雙色流動填充</p>
        </div>
        
        <div class="demo-box">
            <div class="gradient-text effect-3">EFFECT</div>
            <p style="color: #aaa;">霓虹填充效果</p>
        </div>
        
        <div class="demo-box">
            <div class="gradient-text effect-4">ANIMATION</div>
            <p style="color: #aaa;">閃爍填充效果</p>
        </div>
    </div>
    
    <div class="code-block">
        <h3>核心CSS代碼</h3>
        <pre><code>
/* 漸變文字基礎樣式 */
.gradient-text {
    font-size: 4rem;
    font-weight: 900;
    text-transform: uppercase;
}

/* 基礎填充動畫 */
.effect-1 {
    /* 創建漸變：50%顏色，50%透明 */
    background: linear-gradient(90deg, 
        #ff0080 0%, 
        #ff0080 50%, 
        transparent 50%, 
        transparent 100%);
    
    /* 放大背景以便動畫移動 */
    background-size: 200% 100%;
    
    /* 將背景限制在文字內部 */
    -webkit-background-clip: text;
    background-clip: text;
    
    /* 使文字顏色透明以顯示背景 */
    color: transparent;
    
    /* 動畫：移動背景位置實現填充效果 */
    animation: fill-effect-1 3s infinite alternate;
}

/* 動畫定義 */
@keyframes fill-effect-1 {
    0% {
        background-position: 100% 0; /* 從右側開始 */
    }
    100% {
        background-position: 0 0; /* 移動到左側 */
    }
}
        </code></pre>
    </div>
    
    <div class="footer">
        <p>每天一個CSS小樣式 | 漸變文字填充動畫</p>
        <p>使用純CSS實現，無需JavaScript</p>
    </div>

    <script>
        // 簡單交互：點擊文字暫停/播放動畫
        document.querySelectorAll('.gradient-text').forEach(text => {
            text.addEventListener('click', function() {
                if (this.style.animationPlayState === 'paused') {
                    this.style.animationPlayState = 'running';
                } else {
                    this.style.animationPlayState = 'paused';
                }
            });
        });
    </script>
</body>
</html>

效果説明

這個頁面展示了四種漸變文字填充效果：

  1. 基礎填充動畫：文字從右向左逐漸填充顏色
  2. 雙色流動填充：兩種顏色在文字中流動
  3. 霓虹填充效果：多種顏色漸變在文字中流動
  4. 閃爍填充效果：文字部分閃爍顯示

技術要點

  • background-clip: text - 將背景限制在文字內部
  • linear-gradient() - 創建漸變背景
  • background-size: 200% 100% - 放大背景以便動畫移動
  • color: transparent - 使文字透明以顯示背景
  • @keyframes 動畫 - 控制背景位置實現填充效果
  • animation-play-state - 通過JavaScript控制動畫播放狀態

這個效果完全使用純CSS實現，只有簡單的JavaScript用於交互控制。代碼簡潔但效果炫酷，非常適合用於標題和重點文字展示。