今天要介紹，如何使用 border-radius 和 transform 創建膨脹的泡泡字體，並讓字體不斷變形

HTML

創建一個名為 bubble-text 的容器，並將每個字母包裝在 <span> 標籤中，方便應用泡泡效果和動畫

<div class="bubble-text">
    <span>B</span>
    <span>U</span>
    <span>B</span>
    <span>B</span>
    <span>L</span>
    <span>E</span>
</div>

CSS

1. body 基本樣式

使用 flexbox 將內容垂直和水平置中，讓字體效果居中顯示

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

2. .bubble-text 容器樣式

需要讓字母水平排列

.bubble-text {
   display: flex;
   justify-content: center;
}

• display : 將字母容器設置為彈性容器，讓所有字母按行排列
• justify-content : 使字母在容器中保持水平置中

3. 字母的樣式與動畫

對每個字母應用樣式和動畫效果，讓它們看起來像泡泡並且不斷膨脹與縮小

.bubble-text span {
   position: relative;
   font-size: 100px;
   padding: 10px;
   background: linear-gradient(135deg, #ff7a7a, #ffc6ff);
   border-radius: 50%;
   animation: deform 3s infinite ease-in-out;
   margin: 0 5px;
   color: white;
 }

• padding : 為每個字母提供適當的內邊距，讓字母和背景之間有空間
• background : 使用線性漸變設置背景色
• border-radius : 將邊角設置為圓形，讓字母看起來像泡泡
• animation : 應用 deform 動畫，讓字母不斷變形，動畫每 3 秒循環一次，並使用平滑的進出效果

4. 字母的動畫效果

讓字母像氣球一樣不斷膨脹和縮小，並且伴隨輕微的旋轉，模擬氣泡的動態感

@keyframes deform {
    0% {
     transform: scale(1) rotate(0deg);
     border-radius: 50%;
   }
   50% {
     transform: scale(1.2) rotate(10deg);
     border-radius: 40%;
   }
   100% {
     transform: scale(1) rotate(0deg);
     border-radius: 50%;
   }
 }

• transform: scale(1) ： 初始狀態下，字母保持正常大小
• rotate(0deg) ： 字母最初沒有旋轉
• scale(1.2) ： 在動畫的中間，字母放大 1.2 倍，模仿氣泡膨脹的效果
• rotate(10deg) ： 字母輕微旋轉 10 度，模擬泡泡的輕微浮動
• border-radius ： 在字母膨脹時，邊角從圓形變成略微尖角，模擬形狀的動態變化，然後回到圓形

結果呈現