项目简介
「走马观花迎新春」是一款基于 Web 技术的 3D 交互式新年祝福页面。作品融合了传统「走马灯」的视觉美学与现代 CSS 3D 动画技术，打造出沉浸式的新年氛围体验。
核心特色：
3D 八边形走马灯 - 纯 CSS 3D 变换打造的旋转灯笼
正面祝福卡片 - 始终朝向观众的祝福语展示
旋转文字圆环 - 「2026 马年大吉」环绕排列
流畅交互 - 悬停减速、点击切换祝福语
响应式设计 - 完美适配 PC 与移动端
使用到的 iFlow CLI 功能
| 功能模块 | 具体应用 |
|---|---|
write_file |
创建 HTML/CSS/JS 单文件项目 |
replace |
多次迭代修改代码，调试交互逻辑 |
read_file |
读取文件内容，定位修改位置 |
task (frontend-tester) |
前端功能验证与测试 |
glob / search_file_content |
项目结构探索（备用） |
实现过程
第一步：创意构思
从「走马观花」成语出发，结合马年主题，设计一款融合传统元素与现代技术的交互页面。核心目标是：视觉效果震撼 + 交互体验流畅 + 代码简洁优雅。
第二步：基础结构搭建
- 使用单 HTML 文件结构
- 配置 CSS 3D 透视场景（
perspective: 1200px） - 设计深蓝渐变背景营造夜空氛围
第三步：走马灯实现
- 创建八边形几何结构（8个面的角度计算）
- 实现 CSS 3D 旋转动画（
transform-style: preserve-3d） - 添加金色渐变配色与发光效果
第四步：交互功能开发
- 悬停减速：监听
mouseenter/mouseleave事件，动态切换动画速度 - 点击切换：实现祝福语随机切换 + 淡入动画 + 旋转方向反转
- 使用 CSS
animation-direction控制圆环反向
第五步：细节打磨
- 添加装饰性光点浮动动画
- 实现底部无缝文字轮播
- 响应式适配（768px / 480px 断点）
- 背景文字圆环动态生成
页面截图
┌─────────────────────────────────────────────────────────┐
│ 🏮 走马观花迎新春 🏮 │
│ 马年大吉 · 万事如意 │
│ │
│ ┌─────────────────────┐ │
│ │ 🐴 龙马精神 │ ← 祝福卡片 │
│ └─────────────────────┘ │
│ ════════════════════════ ← 八边形光环 │
│ │
│ 悬停减速 · 点击切换祝福语 │
├─────────────────────────────────────────────────────────┤
│ 🏮 马年大吉 · 万事如意 🏮 马年大吉 · 万事如意 ... │ ← 底部轮播
└─────────────────────────────────────────────────────────┘
体验链接
技术亮点总结
- 纯 CSS 3D：无需 WebGL，纯 CSS 实现立体效果
- 单文件架构：HTML + CSS + JS 一体，零依赖
- 高性能动画：使用
requestAnimationFrame确保流畅 - 优雅降级：移动端自动简化，保留核心体验
写在最后
通过 iFlow CLI 快速完成了从创意到实现的完整流程。从最初的 HTML 骨架搭建，到反复调试点击交互逻辑（最初是切换方向，后来改为切换祝福语并正面展示），整个过程体现了「快速迭代」的开发理念。
新的一年，祝大家：
龙马精神 · 马到功成 · 万事如意！
本项目使用 iFlow CLI 打造