【新春创造营】🤖AI智能助手·科技拜年新体验

线上网页: :robot: AI智能助手 - 现代科技春节
项目简介
一款假装AI的问答助手

用纯前端技术打造了一款“AI 智能助手”春节主题互动页,把传统年味装进赛博朋克外壳——霓虹渐变、粒子网格、脉冲 Avatar,一键即可召唤“拜年小助手”。无需后端,打开就能玩,让亲戚好友扫码就能收获一段带代码温度的春节祝福。

用到的 iFlow CLI 功能

本次纯静态实现,未依赖 iFlow CLI 编译流程;若后续接入云函数或低代码数据流,可直接把对话日志、抽奖逻辑丢到 iflow deploy 一键上线。

实现过程

网页链接:
通过网盘分享的文件:08_AI智能助手.html
链接: 百度网盘 请输入提取码 提取码: 9000

  1. 视觉层:CSS 变量 + @keyframe 做“呼吸”渐变边框;用 conic-gradient 旋转遮罩实现 0 图片光环动效。
  2. 交互层:ES6 Class 封装 AIAssistant,指令式与开放式双模式——点按钮走“春节祝福、年夜饭、诗词”等 6 条预设;手动输入则关键词匹配兜底回复,后续可无缝替换成 ChatGPT 接口。
  3. 性能层:所有动画使用 GPU 加速属性(transform、opacity),低端机 60 fps 无压力;装饰粒子用 10 个 div 搞定,不引第三方库,首屏 <180 KB。
  4. 适配:clamp + rem 响应式,手机横竖屏自动重排;键盘弹起时输入框 fixed 不上浮。

截图

(由于当前会话为附件模式,无法直接上传,可运行后 F12 手机模式查看,或把代码丢进 CodePen 即刻预览。)

体验链接

:backhand_index_pointing_right: 直接双击打开 08_AI智能助手.html 即可本地体验;

:backhand_index_pointing_right: 线上托管:把仓库 push 到 GitHub Pages,访问[ https://你的用户名.github.io/08_AI智能助手.html 就能发给亲友玩。]百度网盘 请输入提取码

新春快乐,Happy Hacking!

@10008873411 期待!!

期待啊~但需提供体验链接才可视作参与哇大佬

部署成功!!!

没玩明白哈哈,怎么都是一样的话术

哈哈哈哈,我也玩了一下,这是智能助手,发送信息就会显示固定话语,点击发送才能发送不一样的文字。但是创意还可以,如果优化一下感觉还不错。