第25课：网页彩蛋
进度 0/30
🥚
网页彩蛋
项目五：藏在网页里的小惊喜
📖知识引入
🥚什么是彩蛋
程序员藏在作品里的小秘密：输入暗号、连点logo、按神秘按键……只有细心的人才能发现。像藏在书里的作者签名！
🎭经典彩蛋案例
连点logo三次，logo翻个跟头；键盘输入「上上下下左右左右」，解锁秘密模式；页脚停留10秒，冒出一句悄悄话。
🗝️触发方式
连点N次、按下特定按键组合、鼠标悬停特殊位置、页面停留够久、在特定时间访问（比如你的生日）……触发器是彩蛋的钥匙。
💡彩蛋的意义
让发现的人会心一笑，你的网站立刻有了「人味儿」和灵魂。技术会过时，但惊喜带来的快乐永远新鲜。
🤖AI创意伙伴
问AI「帮我的网页设计一个没人发现得了的彩蛋」，它的脑洞比你还大：点击猫10次、深夜模式、隐藏成就系统……
💡
好彩蛋像礼物：不用贵，但要让人「哇」！
🔍彩蛋创意工坊
<h1 id="logo">我的网站</h1>
<script>
let clicks = 0; // 计数器
let logo = document.getElementById("logo");
logo.addEventListener("click", function () {
clicks = clicks + 1;
if (clicks === 5) {
// 彩蛋触发！
logo.style.transition = "all 1s";
logo.style.transform = "rotate(360deg) scale(1.5)";
alert("🎁 恭喜发现隐藏彩蛋！你是超级细心的访客！");
}
});
</script>十个可以抄的彩蛋创意：
1️⃣ 连点标题5次→标题跳起舞来
2️⃣ 输入「生日快乐」→全屏撒花🎉
3️⃣ 页脚藏一行小字：
「恭喜你翻到这里！」
4️⃣ 按K键→猫咪从天而降
5️⃣ 悬停logo 3秒→logo眨眼睛
6️⃣ 深夜12点访问→自动暗色模式
7️⃣ 控制台藏一句话
（按F12才能看到）
8️⃣ 404页面→小游戏代替报错
9️⃣ 连续访问7天→解锁隐藏徽章
🔟 页面底部→一只慢慢爬的蜗牛
右边代码是最经典的连击彩蛋： 连点标题5次， 触发隐藏惊喜—— 简单，但真的好玩！
🎯小测验
第1题：「网页彩蛋」指的是？
第2题：下面哪个不算彩蛋的常见触发方式？
第3题：彩蛋最大的意义是？
📝本课知识点
- ✓彩蛋=藏在网页里的小惊喜
- ✓触发器：连点/按键/悬停/时间
- ✓彩蛋给网站注入灵魂
- ✓F12控制台也能藏彩蛋
- ✓AI脑洞大，彩蛋创意多
第25课完成！继续探索下一课吧 🚀