DAY 1 / X

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

學習用簡單的程式碼,讓 emoji 跳起來

1
認識 HTML 是什麼
HTML 就像是網頁的「骨架」,告訴電腦要顯示什麼內容。
我們用 <div> 標籤來裝東西,就像一個盒子一樣!
HTML
<div>
  🎈
</div>
2
讓圖案變大
用 CSS 的 font-size 可以改變大小。
數字越大,圖案就越大!
HTML + CSS
<div style="font-size: 80px;">
  🎈
</div>
3
讓圖案動起來!
最酷的部分來了!我們用 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 種酷炫動畫效果(解除邊框限制,讓圖案飛出去吧!)

1
認識 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 派對:上傳一張自己畫的圖,配上「🔄 旋轉」和「⚡ 最快速度」,舉辦一場線上派對!
  • 📏 魔法放大鏡:挑戰把圖案縮到最小,再放大到「飛出邊框」,看看數字是怎麼像魔法一樣改變畫面的!