Day 1：你的第一個會動的圖案

認識 HTML 是什麼

HTML 就像是網頁的「骨架」，告訴電腦要顯示什麼內容。
我們用 <div> 標籤來裝東西，就像一個盒子一樣！

HTML

<div>
  🎈
</div>

讓圖案變大

用 CSS 的 font-size 可以改變大小。
數字越大，圖案就越大！

HTML + CSS

<div style="font-size: 80px;">
  🎈
</div>

讓圖案動起來！

最酷的部分來了！我們用 animation 讓圖案跳躍。
這些黃色的數字，就是你等下可以調整的地方！

完整程式碼

<style>
  .bounce {
    font-size: 80px;
    animation: jump 1s infinite;
  }
  
  @keyframes jump {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-30px); }
  }
</style>

<div class="bounce">
  🎈
</div>

現在換你調整看看！

移動下方的滑桿，看看會發生什麼變化 👇

1️⃣ 選擇你喜歡的 emoji (共9款)

🎈

🚀

⭐

🐱

🍕

🎮

🌈

🎨

🦄

2️⃣ 圖案大小：font-size 80px

3️⃣ 上下位置 (+/-) 20px

4️⃣ 動畫速度：animation 1.0s

5️⃣ 跳躍高度：translateY 30px

即時預覽

🎈

📝 你的程式碼（自動生成）

認識 6 種動畫類型

每一種動畫都有不同的效果，現在你可以在下方的控制面板中自由切換，選擇一個你最喜歡的！

這些動畫怎麼做出來的？

⬆️

跳躍 (bounce)：改變上下位置 translateY

🔄

旋轉 (spin)：改變旋轉角度 rotate

🎯

搖擺 (swing)：左右擺動 rotate

💗

脈動 (pulse)：改變大小 scale

➡️

滑動 (slide)：改變左右位置 translateX

🙃

翻轉 (flip)：改變 3D 翻轉角度 rotateY

現在換你調整看看！

選擇圖案、動畫類型，然後調整參數 👇

1️⃣ 選擇你喜歡的 emoji (共9款)

🎈

🚀

⭐

🐱

🍕

🎮

🌈

🎨

🦄

📤 或上傳你自己的圖片

2️⃣ 選擇動畫效果 (共6種)

3️⃣ 圖案大小：font-size 80px

4️⃣ 上下位置 (+/-) 20px

5️⃣ 左右位置 (L/R) 0px

6️⃣ 動畫速度：animation 1.0s

7️⃣ 跳躍高度：translateY 30px

即時預覽

🎈

📝 你的程式碼（自動生成）

🎨 給小朋友的創意玩法

爸爸媽媽可以帶著小朋友一起嘗試這些有趣的小遊戲：

📖 故事時間：選一個動物 emoji（像是 🐱），改變大小和速度，讓它「演出」一段心情故事（例如開心地跳躍，或是慢慢地滑動）。
🕵️ 猜猜看遊戲：家長調整一組動畫（例如：快速的💗脈動），讓小朋友猜猜這代表什麼感覺？
💃 DJ 派對：上傳一張自己畫的圖，配上「🔄 旋轉」和「⚡ 最快速度」，舉辦一場線上派對！
📏 魔法放大鏡：挑戰把圖案縮到最小，再放大到「飛出邊框」，看看數字是怎麼像魔法一樣改變畫面的！

🎉 你的第一個會動的圖案！

🚀 探索更多動畫效果！