這篇文章要介紹，如何使用 HTML 和 CSS 創建一個具有 3D 立體效果的加載動畫

HTML

創建一個 loading-container 容器，裡面包含加載的文字效果

<div class="loading-container">
    <h1 class="loading-text">
        <span>L</span>
        <span>o</span>
        <span>a</span>
        <span>d</span>
        <span>i</span>
        <span>n</span>
        <span>g</span>
        <span>...</span>
    </h1>
</div>

• loading-containe : 此容器用於包裹整個加載文本，提供一個背景或邊界
• loading-text : 顯示加載文本，h1 標籤可以幫助強調這段文本的重要性
• span 元素 : 每個字母及點都用 span 標籤包裹，可以讓每個字母或動畫進行單獨設計

CSS

1. 設定頁面樣式

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

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

2. 加載容器與文本樣式

.loading-container {
   perspective: 800px; 
}

.loading-text {
   font-size: 100px;
}

• perspective : 設置一個 3D 透視效果，當應用 3D 變換時，這個屬性會影響深度感
• font-size : 設定加載文本的字體大小

3. 每個字母的樣式及動畫

.loading-text span {
   display: inline-block; 
   color: rgba(255, 255, 255, 0.8); 
   text-shadow: -1px -1px rgba(255, 223, 140, 0.8), 
                -2px -2px rgba(255, 223, 140, 0.8), 
                -3px -3px rgba(255, 223, 140, 0.8), 
                -4px -4px rgba(255, 223, 140, 0.8), 
                -5px -5px rgba(255, 223, 140, 0.8), 
                -6px -6px rgba(255, 223, 140, 0.8);
   animation: float 2s ease-in-out infinite; 
}

• display :
  • inline-block : 使每個字母可以獨立浮動
• color : 將字母顏色設為半透明的白色
• text-shadow : 為字母添加多層陰影效果，分別在不同的位置（-1px 到 -6px）使用相同顏色的陰影
• animation : 將字母的動畫設為名為 float 的動畫，持續時間為 2 秒，使用 ease-in-out 的過渡效果，並設置為無限循環

4. 浮動動畫定義

@keyframes float {
   0% {
       transform: translateY(0);
   }
   50% {
       transform: translateY(-20px); /
   }
   100% {
       transform: translateY(0);
   }
}

• translateY :
  • 0% 和 100% : 字母的位置不變
  • 50% : 向上浮動 20 像素，創造出輕微的浮動效果

5. 字母動畫延遲

.loading-text span:nth-child(1) { animation-delay: 0s; }
.loading-text span:nth-child(2) { animation-delay: 0.1s; }
.loading-text span:nth-child(3) { animation-delay: 0.2s; }
.loading-text span:nth-child(4) { animation-delay: 0.3s; }
.loading-text span:nth-child(5) { animation-delay: 0.4s; }
.loading-text span:nth-child(6) { animation-delay: 0.5s; }
.loading-text span:nth-child(7) { animation-delay: 0.6s; }
.loading-text span:nth-child(8) { animation-delay: 0.7s; }

• 選擇器 :
  • span: 指定選擇所有的 span 元素。
  • nth-child(n): 表示選擇父元素中的第n個 span 子元素
• animation-delay : 為每個字母的動畫效果設置不同的延遲時間，使得每個字母在加載過程中以不同的時間間隔開始動畫，創造出逐漸浮動的效果

結果呈現