鹈鹕骑行记 · PELICAN RIDE

纯 HTML + SVG + JS 绘制的 2D 逐帧骨骼动画 · 踩踏 / 视差 / 昼夜 / 车铃全交互

SVG 矢量手绘 60FPS
pelican-ride.svg — 实时渲染中
60 FPS
22.0 km/h
0.000 km
白昼骑行
育儿袋 · 超能装 翅膀 · 扶车把 鱼篓 · 今日收获 风火轮 · 转转转 脚蹼 · 踩踏机 叮铃铃!送鱼来啦 ~
1.0x

空格 暂停 / 继续 ↑ ↓ 调整速度 夜晚会自动打开自行车前灯

动画是怎么动的?
  • 双腿使用两段式 IK 解算:脚踩住脚踏圆周,反推膝盖位置。
  • 车轮 / 牙盘 / 曲柄按传动比联动,身体随踩踏频率起伏。
  • 远山、树木、路面三层视差无缝循环,速度越快前倾越大。
鹈鹕送鱼小剧场
  • 喉囊里藏着一条鱼,车头鱼篓里还有两条,今日大丰收。
  • 红色围巾随风飘动,速度拉满还会出现白色速度线。
  • 试试按车铃:鹈鹕会张开喉囊、大喊“送鱼来啦”。
SVG 手绘清单
120+ 矢量零件 双轮辐条旋转 IK 双腿踩踏 SMIL 围巾飘动 眨眼 / 尾巴 / 鱼摆动 零图片 · 纯代码

所有鹈鹕、自行车、云朵、树木均为 SVG 路径手绘,可无限放大不模糊。