【新春创造营】马年马上心愿墙
项目介绍
马年马上心愿墙是一个无 Canvas 的交互式心愿贴工具，核心围绕"马上 + 心愿"的吉祥话术打造。用户可以输入自定义心愿或选择预设模板，挑选喜欢的心愿贴样式（小马剪纸款、红信封款、祥云马纹款），通过纯 JS + CSS 实现心愿贴的拖拽、吸附效果，将心愿"贴"到国风墙面上。
项目整体交互轻松有趣，贴合春节氛围，带有轻微的飘动/晃动动画，点击他人心愿贴还能查看祝福回复，模拟"多人许愿"的社交氛围。
使用到的 iFlow CLI 功能
本项目使用 iFlow CLI 的 run_shell_command 和 write_file 工具完成开发：
-
mkdir：创建项目目录 -
write_file：编写完整的 HTML 单文件项目 -
通过浏览器直接打开运行，无需额外构建步骤
实现过程
1. 页面结构设计
-
标题区：醒目的"马年春节・马上心愿墙"标题，带有灯笼装饰动画
-
编辑区：心愿输入、模板选择、样式选择、昵称输入、操作按钮
-
心愿墙区：国风木纹背景墙面，作为心愿贴的展示区域
2. 核心交互实现
拖拽功能
// 监听 mousedown/mousemove/mouseup 事件
element.addEventListener('mousedown', startDrag);
吸附效果
// 自动吸附到网格
const snappedX = Math.round(currentX / gridSize) * gridSize;
element.style.transition = 'all 0.2s ease';
CSS 动画
/* 飘动效果 */
@keyframes float {
0%, 100% { transform: rotate(var(--base-rotation)) translateY(0); }
50% { transform: rotate(var(--base-rotation)) translateY(-5px); }
}
/* 晃动效果 */
@keyframes shake {
0%, 100% { transform: rotate(var(--base-rotation)); }
25% { transform: rotate(calc(var(--base-rotation) + 3deg)); }
75% { transform: rotate(calc(var(--base-rotation) - 3deg)); }
}
3. 三种心愿贴样式
| 样式 | 视觉效果 | 适用场景 |
|---|---|---|
 小马剪纸 |
暖橙色调，剪纸风格，右上角小马图标 | 温馨祝愿 |
 红信封 |
红金配色，传统红包风格 | 财运祝福 |
 祥云马纹 |
淡紫色调，云纹边框 | 平安健康 |
4. 数据持久化
使用 localStorage 保存用户创建的心愿，支持刷新后恢复。
截图预览
体验链接
项目亮点
-
轻交互差异化：拖拽 + 吸附 + 微动效，无 Canvas、无复杂逻辑
-
马年专属：所有心愿贴样式、模板话术均含马元素
-
社交感：预设 8 条心愿贴，模拟"多人许愿"氛围
-
零依赖：纯原生 HTML/CSS/JS，可直接运行
新春祝福
马年到！许下心愿，马上实现！
愿大家在新的一年里：马上平安、马上暴富、马上脱单、马上团圆、马上上岸、马上健康、马上升职、马上幸福！
项目完成于 2026年2月