今天要學習如何使用 CSS 創建一個背景漸變動畫效果，為網站增添動感和視覺吸引力

HTML

<div class="gradient-background">Hello, World!</div>

CSS

設置 body 背景動畫

將背景漸變效果應用到 body 元素上

body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(45deg, #ff0066, #ffcc00, #66ffcc, #00ccff);
    background-size: 400% 400%;
    animation: gradientAnimation 5s ease infinite;
}

• background: linear-gradient(45deg, #ff0066, #ffcc00, #66ffcc, #00ccff):
  設置背景為 45 度角的線性漸變效果，包含四種顏色，創造出豐富的視覺效果
  • linear-gradient: 用於創建線性漸變背景
  • 45deg : 漸變的角度，表示漸變方向為 45 度角
  • #ff0066, #ffcc00, #66ffcc, #00ccff : 漸變的顏色，依次從左上角到右下角變化
• background-size: 400% 400% : 設置背景漸變的尺寸，為了在動畫過程中能夠覆蓋整個元素
• animation: gradientAnimation 5s ease infinite : 應用動畫效果，5 秒鐘循環一次，使用平滑的過渡效果

設置 .gradient-background 的大小、顏色

.gradient-background{
    font-size: 4rem;
    color: white;
}

• 字體大小 : 4rem
• 顏色 : 白色

定義 keyframes 動畫

需要定義一個關鍵幀動畫 gradientAnimation，實現背景顏色的平滑過渡

@keyframes gradientAnimation {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}

• 0% : 動畫開始時，背景顏色位置在左上角 (0% 0%)
• 50% : 動畫進行到一半時，背景顏色位置移動到右下角 (100% 100%)
• 100% : 動畫結束時，背景顏色位置回到左上角 (0% 0%)，形成循環效果

結果呈現