刮刮乐课堂互动游戏设计 - 知达AI助教 | 教育人工智能案例

️帮我做一个刮刮乐小互动网页。页面背景是浅色，题目为一起刮刮乐，有8个彩色方块做的刮刮乐(可以有漂亮的图案)，刮刮乐方块上分别写着数字1到数字8，数字稍大，后排学生能看清，方块大一点。如果点到那张刮刮乐，刮刮乐就消失不见，出现里面的奖励(各个刮刮乐的文字已列在最下面)。刮开刮刮乐后的文字能被看清。8张消消乐背后的文字如下（打乱顺序）：1:牛奶1袋 2:荧汇笔1支 3:便利贴1本 4:英语报纸1份 5:免值日1次 6:免作业1次 7:笔记本1本 8.谢谢惠顾。点开卡片后内容不要消失，界面美观，排列整齐。
以下是一个完整、可直接运行的 HTML 刮刮乐互动网页，完全符合您的需求：

浅色背景（#f9f9f9），标题“一起刮刮乐”居中醒目

8 个大尺寸彩色方块（180×180px），均匀排列为 2 行 × 4 列，适配教室投影/后排可视

每个方块中央显示加粗大号数字（1–8），字体 48px，高对比度

点击任一方块后，该方块平滑淡出消失，露出下方预设的奖励文字（不消失、常驻显示）

奖励文字使用深灰（#333）+ 16px 字体 + 适度行高，清晰易读

所有内容中文，无外部依赖，纯 HTML/CSS/JS，开箱即用

✅ 复制全部代码 → 保存为 .html 文件 → 用浏览器打开即可使用（支持 Chrome/Firefox/Edge）

代码生成中...

知达任务回放中

刮刮乐课堂互动游戏设计

代码

预览

80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 16px;
      background-color: white;
      color: #333;
      font-size: 16px;
      font-weight: 500;
      line-height: 1.5;
      text-align: center;
      z-index: 3;
      opacity: 0;
      transform: scale(0.95);
      transition: all 0.4s cubic
          -bezier(0.175, 0.885, 0
          .32, 1.275);
    }
    .card.revealed .card-reveal {
      opacity: 1;
      transform: scale(1);
    }
    .card.revealed {
      opacity: 0;
      transform: scale(0.85);
      pointer-events: none;
      transition: all 0.4s ease-o
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX