1.1 胶体性质 交互动画-2026-2027学年高一上学期化学人教版必修第一册

胶体的性质 · 丁达尔效应交互动画 —— 完整流程 ================================================================== 文件：04_胶体性质（交互动画）.html 适用：人教版 高中化学 必修第一册 第一章第一节「物质的分类及转化 —— 分散系及其分类」 技术：单文件 HTML5 + Canvas + requestAnimationFrame，暗色实验室风格，鼠标拖拽 / 触屏兼容 ================================================================== 零、总体结构 ================================================================== 页面顶部：标题、导语、核心图例（溶液·蓝｜胶体·金｜浊液·灰褐｜激光·红）。 页面主体：五个实验模块，通过顶部标签页（Tab）切换，互不干扰、状态独立： 模块 1「丁达尔效应」 —— 主实验（粒径滑条 + 可拖拽激光笔 + 光路显隐） 模块 2「Fe(OH)₃ 胶体制备」—— 拖拽滴管、控温控时的规范操作演练 模块 3「布朗运动与电泳」 —— 胶粒带电的证明与介稳性来源 模块 4「聚沉与渗析」 —— 胶体的破坏与提纯（含生产生活应用） 模块 5「分散系分类挑战」 —— 拖拽卡片闯关，检验知识掌握 页面底部：实时状态面板、提示横幅（info / warn / error 三级）、知识卡片区。 全局：错误操作计分器；累计 3 次严重误操作弹出红框警示弹窗，需手动确认。 ================================================================== 一、模块 1：丁达尔效应（核心模块，默认打开） ================================================================== 1.1 场景构成（Canvas 920×500） ① 中央：一个方形玻璃比色皿（透明容器），内盛分散系液体。 ② 左侧：一支激光笔（红色），可用鼠标按住笔身上下拖拽，改变入射光束高度； 笔尾有电源按钮，点击可开 / 关激光。 ③ 右侧：一块白色接收屏 + 一个"侧面观察者"眼睛图标（表示从侧面观察光路）。 ④ 容器内：按当前粒径实时生成的分散质粒子，做布朗运动（粒径越小抖动越剧烈）。 ⑤ 底部：粒径滑条（对数刻度 0.1 nm ～ 1000 nm），可用鼠标按住滑块直接拖拽， 也可点击轨道跳转、按 ← → 微调。轨道按三段染色： 蓝色段 0.1 ～ 1 nm → 溶液 金色段 1 ～ 100 nm → 胶体（高亮标注"胶体范围"） 灰褐段 100 ～ 1000 nm → 浊液 滑块上方实时显示当前直径数值（如 "35 nm"）与所属分散系名称。 1.2 正确交互：观察丁达尔效应 第 1 步：拖动滑条，把粒子直径调到 1 ～ 100 nm 之间（金色区间）。 → 液体呈现淡淡的乳光（略显浑浊但仍近乎透明），粒子细密均匀、悬浮不沉降。 → 提示："当前为胶体分散系，分散质粒子直径 1～100 nm。" 第 2 步：点击激光笔电源（或点击工具栏「激光笔」按钮）打开激光。 → 一束红光射入容器。 → 【现象】容器内出现一条明亮的红色"光的通路"：光柱清晰可见， 沿途粒子被逐个点亮并闪烁（散射光），光柱两侧有柔和辉光。 → 光柱穿过后仍能在右侧屏幕留下较亮光斑（胶体较透明，透光性好）。 → 结论文字："丁达尔效应 —— 胶体粒子直径与可见光波长（400～700 nm）相近， 对光产生显著散射，形成光亮通路。这是区分溶液和胶体最常用的物理方法。" 第 3 步：保持激光开启，继续拖动滑条向左（调小）。 → 直径 < 1 nm 时切换为【溶液】：液体完全澄清透明，粒子小到近乎不可见。 → 【现象】光路瞬间消失，只能看到激光进入点与射出点两个亮点， 中间没有可见光柱；右侧屏幕光斑最亮（几乎无衰减）。 → 说明："溶液粒子太小（< 1 nm），远小于可见光波长，散射极弱，无丁达尔效应。" 第 4 步：继续拖动滑条向右（调大）。 → 直径 > 100 nm 时切换为【浊液】：液体明显浑浊，大颗粒缓慢沉降 / 上浮，静置分层。 → 【现象】光路同样消失，但原因不同：光在入口处即被大颗粒强烈反射、遮挡， 呈"一团散乱亮斑"而非通路；右侧屏幕几乎接收不到光（不透明）。 → 说明："浊液粒子太大（> 100 nm），主要发生反射和阻挡而非散射， 光被挡住，同样不形成光亮通路。" 第 5 步：拖动激光笔上下移动，光束高度随之改变，光路始终穿过液体， 可从不同高度反复验证现象与位置无关，只与粒径有关。 1.3 实时数据面板（随粒径联动刷新） 分散系类别 / 分散质粒子直径 / 外观（澄清透明·较透明·浑浊）/ 均一性 / 稳定性 / 能否透过滤纸 / 能否透过半透膜 / 丁达尔效应（有 · 无）/ 静置现象（不分层·不分层·分层） 并给出典型实例：溶液（食盐水、蔗糖溶液）｜胶体（Fe(OH)₃ 胶体、豆浆、雾）｜浊液（泥水、石灰乳）。 1.4 附加交互 ·「一键对比」按钮：三个小容器并排，同时用三束激光照射溶液 / 胶体 / 浊液，一屏对照。 ·「关灯 / 开灯」按钮：环境变暗后光路更清晰，模拟真实实验必须在较暗环境中观察。 ·「放大镜」按钮：局部放大观察粒子的布朗运动（为模块 3 埋伏笔）。 1.5 错误操作与警示（本模块） ①【激光直射眼睛 —— 最高级警示】把激光笔拖到右侧"观察者眼睛"的正对方向并开启激光： → 屏幕闪红、蜂鸣式抖动，弹出红框严重警示弹窗： "⚠ 极度危险！激光束绝不能直射人眼或对准他人！ 激光能量高度集中，可在瞬间灼伤视网膜，造成不可逆的永久性失明。 实验时激光笔必须水平射向容器，眼睛只能从侧面观察光路。" → 必须点击"我已知晓"才能继续，且该次操作计入错误计数。 ②【环境过亮硬看】在"开灯"状态下宣称看不到光路： → 黄色提示："环境光太强会淹没散射光，观察丁达尔效应应在较暗环境中进行。" ③【滑条拖到极端值】直径 < 0.5 nm 或 > 800 nm 时： → 提示"已超出常见分散系范围，注意 1 nm 与 100 nm 是两条关键分界线。" ④【常见概念误区拦截】点击"丁达尔效应可用来鉴别所有物质吗？"提示按钮： → 弹出说明："丁达尔效应只能鉴别胶体与溶液，不能用来鉴别胶体和浊液 （浊液本身浑浊，肉眼即可区分）；也不能用它判断分散系是否带电。" ================================================================== 二、模块 2：Fe(OH)₃ 胶体的制备（规范操作演练） ================================================================== 2.1 场景 铁架台 + 石棉网 + 酒精灯 + 烧杯 + 试剂架（蒸馏水瓶、自来水瓶、饱和 FeCl₃ 溶液瓶） + 可拖拽的胶头滴管 + 可拖拽的玻璃棒。右侧显示温度计与计时条。 2.2 正确操作流程（五步，缺一不可，顺序错误会被拦截） 第 1 步：从试剂架拖拽【蒸馏水】倒入烧杯（约 25 mL）。 第 2 步：点击酒精灯点火加热，温度计上升，水面出现气泡直至沸腾（100 ℃）。 第 3 步：拖拽胶头滴管吸取【饱和 FeCl₃ 溶液】，移到沸水上方后逐滴滴入， 规范用量 5 ～ 6 滴（每滴一次计数 +1，滴管口不得伸入液面以下）。 第 4 步：继续煮沸，液体由黄色 → 橙色 → 红褐色，进度条到达"红褐色"即刻点击【停止加热】。 第 5 步：熄灭酒精灯，得到红褐色透明的 Fe(OH)₃ 胶体。 → 生成方程式（注明"胶体"，且不写沉淀符号 ↓）： FeCl₃ + 3H₂O --Δ--> Fe(OH)₃(胶体) + 3HCl → 成功后出现【取样送检】按钮，一键把制得的胶体送入模块 1，直接照射验证丁达尔效应。 2.3 错误操作与严重性警示（本模块重点） ①【用自来水代替蒸馏水】： → 液体立刻出现红褐色浑浊、絮状沉淀。 → 红色警告："实验失败！自来水中含 Ca²⁺、Mg²⁺、Cl⁻、HCO₃⁻ 等电解质， 会中和胶粒所带的正电荷，破坏介稳性，导致胶体立即聚沉。制备胶体必须用蒸馏水。" ②【水未沸腾就滴加 FeCl₃】： → 液体仅呈浅黄色，无红褐色。 → 警告："水解是吸热反应，必须在沸水中进行。温度不够时水解程度很小，得不到胶体。" ③【FeCl₃ 滴加过多（> 10 滴）】： → 出现红褐色沉淀。 → 警告："浓度过大，生成的 Fe(OH)₃ 来不及分散即聚集成沉淀。规范用量为 5～6 滴。" ④【持续煮沸不停止（超过规定时间）】： → 红褐色液体转为红褐色沉淀，容器底部出现沉积。 → 严重警告："长时间加热会使胶粒不断碰撞聚集而聚沉，红褐色胶体变成 Fe(OH)₃ 沉淀， 实验彻底失败。出现红褐色应立即停止加热。" ⑤【用玻璃棒搅拌】： → 拖拽玻璃棒进入烧杯搅拌，胶体迅速浑浊、结块沉降。 → 严重警告："搅拌会加剧胶粒碰撞，直接导致聚沉。制备过程中绝不能搅拌，也不能振荡。" ⑥【手持烧杯 / 直接加热不垫石棉网 / 未熄灭酒精灯就离开】： → 安全类警示弹窗，强调烫伤与炸裂、火灾风险。 ⑦【方程式书写陷阱】完成后弹出选择题：Fe(OH)₃ 后是否加"↓"？ → 选"加↓"则提示："错误！生成的是胶体，分散质仍均匀分散在水中，不是沉淀，不能写 ↓。" ================================================================== 三、模块 3：布朗运动与电泳（胶粒带电 · 介稳性） ================================================================== 3.1 布朗运动子场景 · 放大视野内，胶粒在水分子的无规则撞击下不停地做无规则运动（折线轨迹实时绘制）。 · 温度滑条：升温 → 运动加剧；降温 → 运动减缓。 · 结论："布朗运动使胶粒不易聚集沉降，是胶体具有介稳性的原因之一。" 3.2 电泳子场景 · 场景：U 形电泳管，左右插入两根电极，中间盛红褐色 Fe(OH)₃ 胶体。 · 点击【接通电源】： Fe(OH)₃ 胶粒吸附阳离子而带【正电】→ 向【阴极】定向移动 → 阴极附近颜色明显变深， 阳极附近颜色变浅。 · 切换胶体种类按钮： Fe(OH)₃ / Al(OH)₃ 等金属氢氧化物、金属氧化物胶体 → 带正电 → 移向阴极 硅酸胶体、土壤胶粒、非金属氧化物、金属硫化物胶体 → 带负电 → 移向阳极 淀粉胶体 → 不带电 → 不发生电泳（重要特例） · 电压滑条（0 ～ 100 V）：可用鼠标拖拽。 · 结论区强调三句话： 1) 电泳现象证明【胶粒带电】，而不是"胶体带电"——胶体整体是电中性的。 2) 胶粒带电是因为其表面积大、吸附了溶液中的离子。 3) 同种胶粒带同种电荷，相互排斥，这是胶体介稳性的主要原因。 · 应用链接：工厂静电除尘、电泳电镀、生物大分子电泳分离。 3.3 错误操作与警示 ①【电压调至过高（> 80 V）】：电极上剧烈冒气泡、液体升温，胶体聚沉、颜色浑浊。 → 警告："电压过高会电解水并使体系升温，胶体聚沉，电泳实验失败；同时存在触电风险。" ②【用手同时接触两电极】：弹出严重警示弹窗——"⚠ 严禁湿手接触电极！存在触电危险。" ③【说"胶体带电"】：点击错误结论选项时，红色纠错提示："胶粒带电，胶体不带电，切勿混淆。" ④【对淀粉胶体通电却期待移动】：提示"淀粉胶粒不带电，无电泳现象，这是常考的特例。" ================================================================== 四、模块 4：聚沉与渗析（胶体的破坏与提纯） ================================================================== 4.1 聚沉子场景（拖拽试剂） 烧杯中盛 Fe(OH)₃ 胶体（红褐色透明）。右侧试剂架可拖拽的对象： · Na₂SO₄ 溶液（电解质，SO₄²⁻ 电荷高 → 聚沉能力强） · NaCl 溶液（电解质，Cl⁻ 电荷低 → 聚沉能力弱，需较多） · 硅酸胶体（带负电的胶体 → 与正电胶粒电性中和，相互聚沉） · 酒精灯（加热） · 玻璃棒（搅拌） 拖拽任一对象放入烧杯 → 播放对应聚沉动画：胶粒逐渐聚集变大 → 浑浊 → 生成红褐色沉淀。 面板同步列出【聚沉的三种方法】：加电解质、加带相反电荷的胶体、加热（或搅拌）。 并给出【聚沉能力比较】：离子所带电荷数越多，聚沉能力越强（Al³⁺ > Ca²⁺ > Na⁺）。 生活应用卡片：卤水/石膏点豆腐、江河入海口形成三角洲、明矾（Al(OH)₃ 胶体吸附）净水、 不同型号墨水不能混用、伤口用 FeCl₃ 溶液止血。 4.2 渗析子场景（拖拽半透膜袋） 烧杯盛蒸馏水，拖拽装有"Fe(OH)₃ 胶体 + 少量 FeCl₃（含 Fe³⁺、Cl⁻）"的半透膜袋放入水中。 → 动画：小离子（Fe³⁺、Cl⁻ 蓝色小点）不断穿过半透膜进入外层水中； 胶粒（大金色球）被半透膜挡住，始终留在袋内。 → 【检验】点击「向烧杯外液滴加 AgNO₃ 溶液」：出现白色沉淀 → 证明 Cl⁻ 已透出。 → 【检验】点击「用激光照射袋内液体」：仍有丁达尔效应 → 证明胶体仍在袋内。 → 结论："渗析可用于提纯、精制胶体。若要提高效率，应多次更换蒸馏水（或用流水）。" → 三种分离方法对比表：过滤（分离浊液，胶体和溶液均可透过滤纸） 渗析（分离胶体与溶液，胶粒不能透过半透膜） 蒸发结晶（分离溶质与溶剂） 4.3 错误操作与警示 ①【半透膜袋破损后仍继续渗析】（点击"用玻璃棒戳袋"）： → 胶粒漏入外液，提纯失败。红色警告："半透膜破损会使胶粒漏出，提纯彻底失败， 操作时必须检查半透膜是否完好。" ②【用滤纸代替半透膜提纯胶体】： → 警告："错误！胶粒能透过滤纸，过滤无法把胶体与溶液中的离子分开，必须用半透膜渗析。" ③【渗析后只换一次水就宣布提纯完成】： → 黄色提示："一次渗析残留离子仍较多，应多次更换蒸馏水。" ④【向胶体中加入大量电解质却期待胶体更稳定】： → 红色纠错："加入电解质会中和胶粒电荷，导致聚沉而非稳定。" ================================================================== 五、模块 5：分散系分类挑战（闯关检验） ================================================================== 5.1 玩法 屏幕下方给出 16 张可拖拽的物质卡片，上方三个投放区：【溶液】【胶体】【浊液】。 用鼠标把卡片拖到对应区域，放开即判定，正确卡片变绿留下，错误卡片抖动弹回并给出解析。 5.2 卡片清单与正确归类 溶液：食盐水、蔗糖溶液、稀盐酸、碘酒、澄清石灰水 胶体：Fe(OH)₃ 胶体、淀粉溶液、蛋白质溶液、豆浆、雾、云、烟（气溶胶）、 有色玻璃、烟水晶（固溶胶）、血液 浊液：泥水、石灰乳、油水混合物、牛奶（乳浊液）、Fe(OH)₃ 沉淀与水的混合物 5.3 易错点强制纠错文案 · 雾、云、烟是【气溶胶】，属于胶体，不是"气体溶液"，更不是浊液。 · 有色玻璃、烟水晶是【固溶胶】，胶体不一定是液态。 · 分散系分类的唯一依据是【分散质粒子直径】，不是外观是否透明，也不是状态。 · 胶体与溶液的本质区别是粒子直径 1～100 nm，不是"有没有丁达尔效应"（那是现象不是本质）。 · "Fe(OH)₃ 胶体"与"Fe(OH)₃ 沉淀"完全不同，前者是胶体后者是浊液。 · 牛奶是乳浊液（脂肪微粒直径远大于 100 nm），豆浆是胶体。 5.4 结算 全部归类完成后显示得分、用时、错误清单与逐条解析，可点击【再来一次】重排卡片顺序。 ================================================================== 六、全局错误管理与严重性分级 ================================================================== 一级（蓝色 info）：常规操作提示、知识点补充。 二级（黄色 warn）：不规范但无危险的操作，如未关灯观察、只换一次水。 三级（红色 error）：导致实验失败的错误，如自来水制胶体、搅拌、过度煮沸、滤纸代半透膜。 四级（红框弹窗 + 画面抖动 + 强制确认）：涉及人身安全的操作 —— 激光直射眼睛、湿手接触电极、手持加热烧杯、酒精灯未熄灭离开。 错误计数器常驻页面右上角；累计 3 次三级及以上错误，弹出总结性警示弹窗： "⚠ 你已连续出现多次严重误操作。化学实验中，错误的操作轻则实验失败、数据作废， 重则造成灼伤、失明、火灾等不可逆伤害。请务必牢记： 制备胶体用蒸馏水、不搅拌、不久煮；激光不对眼；湿手不碰电；离开必熄灯。" ================================================================== 七、知识点总览（页面底部常驻卡片，随模块高亮对应条目） ================================================================== 1. 分散系 = 分散质 + 分散剂；按分散质粒子直径分为溶液（<1 nm）、胶体（1～100 nm）、浊液（>100 nm）。 2. 九种分散系组合：分散质与分散剂各有气、液、固三态。 3. 胶体的分类：气溶胶（雾、云、烟）、液溶胶（Fe(OH)₃ 胶体、豆浆）、固溶胶（有色玻璃、烟水晶）。 4. 丁达尔效应：胶体对光的散射形成光亮通路，用于鉴别胶体和溶液。 5. 布朗运动：胶粒的无规则运动，介稳性原因之一。 6. 电泳：胶粒带电，在电场中定向移动；胶体本身电中性。 7. 聚沉：加电解质、加异性电荷胶体、加热搅拌；离子电荷数越高聚沉能力越强。 8. 渗析：利用半透膜提纯胶体；胶粒能透过滤纸，不能透过半透膜。 9. 介稳性：同种电荷排斥 + 布朗运动，稳定性介于溶液与浊液之间。 10. Fe(OH)₃ 胶体制备：沸水 + 5～6 滴饱和 FeCl₃，煮至红褐色立即停止； FeCl₃ + 3H₂O --Δ--> Fe(OH)₃(胶体) + 3HCl（不写 ↓，不写可逆号）。 11. 应用：明矾净水、静电除尘、卤水点豆腐、三角洲形成、血液透析、纳米材料。 ================================================================== 八、技术实现要点 ================================================================== · 单文件 HTML，无外部依赖，双击即可离线运行。 · Canvas 2D 渲染 + requestAnimationFrame 主循环，DPR 适配保证高分屏清晰。 · 粒径滑条为自定义组件：mousedown 抓取 → mousemove 拖拽 → mouseup 释放， 同时支持 touchstart/touchmove/touchend 与键盘 ← → 微调，采用对数映射保证小粒径区可精细调节。 · 光路渲染：以入射方向为轴，用多层半透明渐变叠加模拟散射光柱； 散射强度 I ∝ 由粒径 d 与可见光波长 λ 的关系分段建模（瑞利散射 → 米氏散射 → 反射遮挡）， 胶体区间强度最高，溶液区间趋近于 0，浊液区间光在入口迅速衰减。 · 粒子系统：按粒径决定粒子数量、半径与布朗运动步长（小粒子快、大粒子慢并带沉降速度）。 · 拖拽系统：统一的 hitTest（激光笔、滴管、玻璃棒、试剂瓶、半透膜袋、分类卡片）， 拖拽中显示半透明幽灵对象与目标高亮区，落点无效则平滑弹回原位。 · 状态机：每个模块独立 state 对象，切换标签页时保留各自进度，重置按钮仅重置当前模块。 · 警示系统：banner(text, level) 三级横幅 + showModal(title, text) 强制确认弹窗 + 画面抖动 shake。 $null