Live Demo · 睇睇成品
你的網站可以做到咁！
以下係用 HTML/CSS 做出嚟嘅互動效果——全部都係你由第 1 至 5 章逐步學會建立的！
第 1 章 · HTML Input
📇 你的個人名片卡
用 HTML input 輸入你的資料，即時睇到名片效果！
1
輸入你的資料
HTML <input> 元素讓用家可以輸入資料。下面試試改你的名字同標語！
HTML
<input type="text" placeholder="你的名字" />
<input type="text" placeholder="你的標語" />🎮 試試改改看！
輸入你的名字同標語，右邊名片即時更新 👉
🧑💻
我的名字
Digital Creator 🎨
第 2 章 · CSS 顏色
🎨 主題顏色設計
用 CSS 改變網頁的主題顏色，令你的作品有獨特風格！
2
CSS 主題顏色
用 CSS 的 color 同 background 屬性控制顏色。黃色數值就係你可以改嘅地方！
CSS
:root {
--primary: #FF6B9D;
--bg: #FFF0F6;
}
.card { background: var(--bg); color: var(--primary); }🎮 設計你的主題色！
揀一個主色同背景色，睇看個名片點變 👇
大小：26px
🎨
AI Creator
我嘅個人網站
睇我作品 →
第 3 章 · CSS 動畫
✨ Slider 同動畫效果
用 CSS animation 令元素動起來，用 slider 即時控制效果！
3
CSS @keyframes 動畫
用 @keyframes 定義動畫，用 animation 套用。黃色就係你可以調嘅數值！
CSS
@keyframes bounce {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-40px); }
}
.emoji {
animation: bounce 1s infinite;
font-size: 80px;
}🎮 調整動畫參數！
移動 slider，睇看動畫點變化 👇
🎨
第 4 章 · 嵌入媒體
🗺️ 相片、音樂同地圖
用 HTML 嵌入相片、音樂播放器同 Google 地圖，令網頁豐富生動！
4
HTML 嵌入媒體
用 <img>、<audio> 同 <iframe> 嵌入唔同類型嘅媒體。
HTML
<img src="my-photo.jpg" />
<audio controls src="my-music.mp3"></audio>
<iframe src="https://maps.google.com/..."></iframe>🎮 試試嵌入效果！
揀唔同嘅媒體類型，睇嵌入效果 👇
第 5 章 · QR Code
📱 QR Code + 網站發佈
加入 QR Code，人人掃一掃就即刻睇到你的網站！
5
生成 QR Code
用 JavaScript 生成 QR Code，掃描即刻跳到你的個人網站！輸入你的網址試試。
HTML + JS
<div id="qrcode"></div>
<script>
new QRCode(document.getElementById("qrcode"), {
text: "https://你的網站.pages.dev",
width: 200, height: 200
});
</script>🎮 生成你的 QR Code！
輸入任何網址，即時生成 QR Code 👇
掃描即睇你的網站！