项目简介
一个功能完整的春节主题单页应用，整合了春节倒计时、生肖运势查询和春节祝福语三大功能。使用 iFlow CLI 构建，采用单页应用（SPA）架构，标签切换流畅，体验优秀！
功能特点
春节倒计时功能
精准倒计时到2026年2月17日（丙午马年春节）
动态消息根据剩余天数自动变化（8天时显示"一周倒计时！春节的脚步越来越近了！"）
马年专题详细信息和寓意
8大春节传统习俗展示（发红包、放鞭炮、吃饺子、挂灯笼、贴春联、舞龙舞狮、吃年桔、团圆饭）
金色粒子背景动画（50个粒子从底部漂浮到顶部），营造节日氛围
一键分享倒计时到剪贴板
支持全屏显示模式（F键或F11）
生肖运势查询功能
生肖识别（输入1900-2026年出生年份）
四大运势预测（事业、感情、健康、财运），每项都有星级评分（5星/3星/2星）
幸运元素展示（幸运颜色、数字、方位、月份）
生肖配对检查功能（12×12配对矩阵，支持144种组合，分数50-90分）- 2026年马年专题内容（马生肖特征、2026年预测、马年出生的名人）
- 一键分享运势到剪贴板
春节祝福语功能
精选15条春节祝福语
点击按钮切换祝福语，带淡入淡出动画（300ms）- 一键分享祝福语给朋友
统一特性
- 单页应用架构（SPA），三个标签无缝切换，无需重新加载页面
切换标签时数据状态保持（运势数据保存在localStorage，倒计时继续运行）
丰富的快捷键支持：
- 数字键1：切换到春节倒计时
- 数字键2：切换到生肖运势查询
- 数字键3：切换到春节祝福语
- F/F11：全屏模式切换
完美的响应式设计，支持桌面和移动设备
统一的红金主题风格，符合春节氛围
技术实现
- HTML5 - 页面结构
- CSS3 - 样式和动画（渐变、毛玻璃效果、粒子动画）
- JavaScript (ES6+) - 交互逻辑
- Bootstrap 5.3.0 - 响应式框架
- 单页应用架构 - 标签切换无需重新加载
- 纯前端实现 - 无需后端
- LocalStorage - 数据持久化
设计亮点
- 红金配色方案，符合春节传统
- 传统灯笼装饰元素（标题两侧的灯笼摆动动画）
- 金色粒子背景动画（50个粒子从底部漂浮到顶部，颜色随机）
- 标签切换淡入淡出效果（0.3秒平滑过渡，向上滑入）
- 卡片悬停效果（向上浮起10px + 放大1.05倍）
- 传统习俗卡片居中布局（8个卡片，4列布局）
- 统一的视觉风格，三个标签保持一致性
使用 iFlow CLI 的功能
在项目开发过程中，使用了 iFlow CLI 的以下功能：
智能代码生成 - 快速生成HTML结构
项目结构自动创建 - 自动创建文件目录- 代码整合和优化 - 合并两个项目的功能
- 样式统合 - 合并两个项目的CSS样式
快速原型开发 - 从零到完成仅需几分钟
体验链接
https://spring-festival-assistant.pages.dev/
点击链接即可体验完整功能！
部署平台：Cloudflare Pages
访问方式：无需注册，直接访问即可
项目截图
春节倒计时界面
显示倒计时时间、马年专题、8大春节传统习俗卡片
生肖运势查询界面
显示生肖运势结果、四大运势、幸运元素
春节祝福语界面
显示15条春节祝福语，支持切换和分享
使用场景
- 春节倒计时工具 - 随时查看距离春节还有多久
- 生肖运势查询 - 了解自己的生肖运势和幸运元素
- 祝福语生成 - 获取春节祝福语，分享给亲友
- 桌面时钟（全屏模式） - 作为装饰性的桌面时钟
- 节日氛围展示 - 展示春节文化和传统习俗
- 新年祝福分享 - 快速生成并分享祝福语
项目亮点
- 三合一功能 - 一个应用整合三个春节相关功能，实用性强
- 单页应用架构 - 体验流畅，标签切换无需重新加载
- 完整的配对系统 - 12×12生肖配对矩阵，144种组合全覆盖
- 精美的动画效果 - 粒子、摆动、弹跳、淡入淡出等多种动画
- 丰富的快捷键 - 数字键切换标签，F键全屏，提升用户体验
- 完善的响应式设计 - 支持各种屏幕尺寸（320px-1920px）
- 数据持久化 - 使用localStorage保存运势数据，切换标签不丢失
项目结构
spring-festival-assistant/
├── index.html # 主页面（SPA，535行）
├── README.md # 项目说明
├── css/
│ └── style.css # 统一样式（1054行）
└── js/
├── zodiac.js # 生肖计算引擎（223行）
├── fortune.js # 运势生成系统（197行）
├── countdown.js # 倒计时逻辑（145行）
├── greetings.js # 祝福语生成（90行）
├── particles.js # 粒子特效（80行）
└── app.js # 统一应用控制器（449行）
项目信息
- 项目名称：丙午马年春节助手
- 开发工具：iFlow CLI
- 技术栈：HTML5 + CSS3 + JavaScript + Bootstrap 5
- 开发时间：2026年2月9日
- 代码行数：约1500+行
- 功能模块：3个（倒计时、运势、祝福语）
- 测试状态：
所有功能测试通过
感谢 iFlow CLI
感谢 iFlow CLI 提供强大的开发支持，让我能够快速完成这个功能丰富的春节主题项目！iFlow CLI 的智能代码生成和项目管理功能大大提高了开发效率，让我能够专注于创意和功能实现。
丙午马年，一码当先，马到成功！
