体验地址:丙午马年 - 马到成功
这个贺卡我给它起了个很直白的名字:“金马奔腾”
打开页面,红底金光里一匹马在奔跑,脚下成语像路一样向后掠过,点三下还能触发一段“金马时刻”,背景音乐是广东的经典过年歌曲《迎春花》。
技术栈上比较克制:用 Vite 做构建与开发,Three.js 做 3D 场景(GLTFLoader 加载马的模型与跑步动画),配合后期的 Bloom 光晕增强金色质感;UI 部分就是原生 HTML/CSS,字体用 Google Fonts。音频用原生 audio 做背景音乐开关,移动端又额外处理了 safe-area、视口缩放这些细节,让手机上也不至于挤、糊、卡。
功能其实都围绕“互动 + 氛围”展开:
- 马的跑步动画是 GLB 自带的动作,用 AnimationMixer 驱动;触发“金马”时会短暂加速,给一个明确的反馈。
- 马脚下有一条“成语道路”,内容随机刷新、循环滚动;方向做成“路往后走”,视觉上就更像马在往前跑。
- 场景里有粒子/金粉的点缀,加上光晕后会有节庆那种“亮起来”的感觉。
- 页面上有倒计时与提示文案,配合“福”按钮控制音乐,交互门槛很低,点一下就懂。
寓意,我没有刻意写得很玄:马本来就象征奋进和气势,成语路面是把祝福“铺在脚下”。
你往前跑,身后是“马到成功、一马当先、马不停蹄”这种大家一看就懂的好话;三次互动触发金马加速,也像过年讨个彩头——不是为了炫技,而是让祝福变得更具体、更有记忆点。


