临近过年,快来桌面播放这只马

体验地址:丙午马年 - 马到成功

这个贺卡我给它起了个很直白的名字:“金马奔腾”
打开页面,红底金光里一匹马在奔跑,脚下成语像路一样向后掠过,点三下还能触发一段“金马时刻”,背景音乐是广东的经典过年歌曲《迎春花》。

技术栈上比较克制:用 Vite 做构建与开发,Three.js 做 3D 场景(GLTFLoader 加载马的模型与跑步动画),配合后期的 Bloom 光晕增强金色质感;UI 部分就是原生 HTML/CSS,字体用 Google Fonts。音频用原生 audio 做背景音乐开关,移动端又额外处理了 safe-area、视口缩放这些细节,让手机上也不至于挤、糊、卡。

功能其实都围绕“互动 + 氛围”展开:

  • 马的跑步动画是 GLB 自带的动作,用 AnimationMixer 驱动;触发“金马”时会短暂加速,给一个明确的反馈。
  • 马脚下有一条“成语道路”,内容随机刷新、循环滚动;方向做成“路往后走”,视觉上就更像马在往前跑。
  • 场景里有粒子/金粉的点缀,加上光晕后会有节庆那种“亮起来”的感觉。
  • 页面上有倒计时与提示文案,配合“福”按钮控制音乐,交互门槛很低,点一下就懂。

寓意,我没有刻意写得很玄:马本来就象征奋进和气势,成语路面是把祝福“铺在脚下”。
你往前跑,身后是“马到成功、一马当先、马不停蹄”这种大家一看就懂的好话;三次互动触发金马加速,也像过年讨个彩头——不是为了炫技,而是让祝福变得更具体、更有记忆点。

20260211170317_rec_

8 个赞

这个有意思

3 个赞

你这是奔着100JD去啦

3 个赞

肯定呀 :grinning_face_with_smiling_eyes: ,东卡对我来说很重要

4 个赞

飞书20260216-003719
哈哈 八骏图

2 个赞

20260216003917_rec_
打开看了一下,大屏幕的时候你这个更好看啊,真不错

1 个赞

里面的音乐怎样

4 个赞

能不能来个万马奔腾版本

2 个赞