今天要介紹的是，如何使用 background-image 和 @keyframes 創建一個具有動態變化紋理的背景

HTML

創建一個名為 dynamic-texture 的 div 容器，用於顯示動態背景

<div class="dynamic-texture"></div>

CSS

1. 設置基本樣式

使用 Flexbox 將頁面內容居中顯示，確保所有內容位於畫面正中間

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f2eb;
}

２. 動態背景樣式

 .dynamic-texture {
     width: 100vw;
     height: 100vh;
     background-image: radial-gradient(circle, #a6a6a6 10%, transparent 10%),
                       radial-gradient(circle, #d1c4b2 10%, transparent 10%);
     background-size: 10% 10%;
     background-position: 0 0, 5% 5%;
     animation: textureShift 5s infinite alternate ease-in-out;
  }

• background-image : 使用兩個徑向漸變 (radial-gradient)創建圓形的紋理效果
  • 第一個漸變 : 使用灰色 (#a6a6a6) 和透明色，形成一種圓形的點狀紋理
  • 第二個漸變 : 使用較亮的灰色 (#d1c4b2) 和透明色，疊加在第一個紋理上
• background-size : 設置紋理的大小為 10% x 10%，表示每個漸變圖案將填滿 10% 的視窗寬度和高度
• background-position ：設定兩個漸變的起始位置
  • 第一個漸變 : 從左上角 (0 0) 開始
  • 第二個漸變: 從稍微偏移的位置 (5% 5%) 開始，這樣可以讓紋理不重疊
• animation : 定義一個名為textureShift 的動畫
  • 設置動畫的持續時間為 5 秒，無限次循環
  • 每次動畫會來回反轉 (alternate)
  • 動畫的運行會有平滑的加速和減速效果（ease-in-out）

3. 定義動畫

@keyframes textureShift {
    0% {
        background-size: 10% 10%;
        background-position: 0 0, 5% 5%;
    }
    50% {
        background-size: 12% 12%;
        background-position: 2% 2%, 7% 7%;
    }
    100% {
        background-size: 8% 8%;
        background-position: 1% 1%, 6% 6%;
    }
}

• 0% : 動畫開始，背景的尺寸為 10%，位置為 (0, 0) 和 (5%, 5%)
• 50% : 動畫進行到一半，背景的尺寸增大到 12%，位置稍微偏移到 (2%, 2%) 和 (7%, 7%)
• 100% : 動畫結束，背景的尺寸縮小到 8%，位置移動到 (1%, 1%) 和 (6%, 6%)

結果呈現