线上网页:
AI智能助手 - 现代科技春节
项目简介
一款假装AI的问答助手
用纯前端技术打造了一款“AI 智能助手”春节主题互动页,把传统年味装进赛博朋克外壳——霓虹渐变、粒子网格、脉冲 Avatar,一键即可召唤“拜年小助手”。无需后端,打开就能玩,让亲戚好友扫码就能收获一段带代码温度的春节祝福。
用到的 iFlow CLI 功能
本次纯静态实现,未依赖 iFlow CLI 编译流程;若后续接入云函数或低代码数据流,可直接把对话日志、抽奖逻辑丢到 iflow deploy 一键上线。
实现过程
网页链接:
通过网盘分享的文件:08_AI智能助手.html
链接: 百度网盘 请输入提取码 提取码: 9000
- 视觉层:CSS 变量 + @keyframe 做“呼吸”渐变边框;用 conic-gradient 旋转遮罩实现 0 图片光环动效。
- 交互层:ES6 Class 封装 AIAssistant,指令式与开放式双模式——点按钮走“春节祝福、年夜饭、诗词”等 6 条预设;手动输入则关键词匹配兜底回复,后续可无缝替换成 ChatGPT 接口。
- 性能层:所有动画使用 GPU 加速属性(transform、opacity),低端机 60 fps 无压力;装饰粒子用 10 个 div 搞定,不引第三方库,首屏 <180 KB。
- 适配:clamp + rem 响应式,手机横竖屏自动重排;键盘弹起时输入框 fixed 不上浮。
截图
(由于当前会话为附件模式,无法直接上传,可运行后 F12 手机模式查看,或把代码丢进 CodePen 即刻预览。)
体验链接
直接双击打开 08_AI智能助手.html 即可本地体验;
线上托管:把仓库 push 到 GitHub Pages,访问[ https://你的用户名.github.io/08_AI智能助手.html 就能发给亲友玩。]百度网盘 请输入提取码
新春快乐,Happy Hacking!


