今天要介紹如何使用 CSS 中的 text-shadow 和 transform 屬性來創建一個簡單且具有視覺衝擊力的文本動畫。這些屬性可以製作出發光、移動和放大效果，讓文本在網頁中呈現出動態的效果

HTML

所有文本動畫效果使用相同的 HTML 結構：

<h1 class="text-animate">Welcome!</h1>

CSS

body 和文本的基礎樣式在所有範例中保持一致：

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

h1 {
   font-size: 3rem;
   font-weight: bold;
   color: #3498db;
   margin: 0;
   transition: all 0.5s ease;
}

1. 簡單的 text-shadow 懸停動畫

當懸停時，文本顏色變深，並且添加陰影效果

.text-animate {
   text-shadow: none; /* 初始狀態無陰影 */
}

.text-animate:hover {
   color: #2980b9; /* 懸停時變深的藍色 */
   text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); /* 懸停時，產生陰影效果 */
}

• text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3) : 添加了一個陰影效果，陰影的具體參數如下
  • offset-x | offset-y | blur-radius | color :
    • offset-x (水平偏移量): 2px
      • 陰影會向右偏移 2 像素
    • offset-y (垂直偏移量): 2px
      • 陰影會向下偏移 2 像素
    • blur-radius (模糊半徑): 8px
      • 陰影的模糊程度，值越大，陰影越模糊和柔和
    • color (陰影顏色): rgba(0, 0, 0, 0.3)
      • 使用 rgba 顏色格式，這裡表示黑色 (rgb(0, 0, 0)) 並帶有 30% 不透明度

2. 字母放大懸停效果

當鼠標懸停時，文本會稍微放大，強調它的存在感

.text-animate {
   transform: scale(1); /* 初始狀態下正常大小 */
}
 
.text-animate:hover {
   transform: scale(1.2); /* 懸停時放大到 1.2 倍 */
}

• transform: scale() :
  • transform 屬性 : 用來對元素進行 2D 或 3D 轉換，可以進行平移、旋轉、縮放和傾斜等變換
  • scale() : 對元素進行縮放

3. 顏色和陰影的漸變效果

懸停時，文本會進行顏色和陰影的漸變

.text-animate {
   text-shadow: none;
   color: #3498db; /* 初始文本顏色 */
   transition: color 0.3s ease, text-shadow 0.3s ease; /* 平滑過渡效果 */
}

.text-animate:hover {
   color: #e74c3c; /* 懸停時變為紅色 */
   text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5); /* 懸停時，產生陰影效果 */
}

• transition : color 0.3s ease, text-shadow 0.3s ease :
  • transition : 設定過渡效果
  • color 0.3s ease : 文本顏色變化會在 0.3 秒內平滑過渡，速度逐漸變緩
  • text-shadow 0.3s ease : 文本陰影變化也會在 0.3 秒內平滑過渡，速度逐漸變緩

4. 旋轉與陰影效果

懸停時，文本會伴隨著旋轉並增加陰影效果

.text-animate {
   transform: rotate(0deg); /* 初始狀態無旋轉 */
   text-shadow: none;
}

.text-animate:hover {
   transform: rotate(10deg); /* 懸停時旋轉 10 度 */
   text-shadow: 4px 4px 15px rgba(0, 0, 0, 0.3); /* 懸停時添加陰影 */
}

• transform: rotate(angle) : 對元素做旋轉

5. 文字縮放和模糊效果

懸停時，文本會放大並且產生模糊效果

.text-animate {
   transform: scale(1);
   filter: blur(0px); /* 初始無模糊 */
}

.text-animate:hover {
   transform: scale(1.3); /* 懸停時放大 1.3 倍 */
   filter: blur(2px); /* 懸停時添加模糊效果 */
}

• filter: blur(radius) : 用來對元素進行模糊效果處理

6. 示例

• HTML

<div class="animated-text">Hello Welcome!</div>

• CSS
  在body中設置一個基礎的樣式:

body {
   font-family: Arial, sans-serif;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
   background-color: #111;
   margin: 0;
}

.animated-text {
   font-size: 4rem;
   color: white;
   text-shadow: 0 0 5px #fff, 0 0 10px #f0f, 0 0 15px #0ff, 0 0 20px #f0f, 0 0 30px #0ff;
   animation: glow 2s infinite alternate, move 3s infinite ease-in-out;
}

@keyframes glow {
   0% {
       text-shadow: 0 0 5px #fff, 0 0 10px #f0f, 0 0 15px #0ff, 0 0 20px #f0f, 0 0 30px #0ff;
   }
   100% {
       text-shadow: 0 0 20px #f0f, 0 0 30px #0ff, 0 0 40px #f0f, 0 0 50px #0ff, 0 0 60px #f0f;
   }
}

@keyframes move {
   0%, 100% {     
       transform: translateY(0);
   }
   50% {      
       transform: translateY(-10px) scale(1.05);
   }
}