本文将手把手教你使用纯 SVG CSS 动画绘制一只可爱的鹈鹕骑自行车的 2D 动画场景。无需 JavaScript无需任何第三方库一个 HTML 文件即可搞定## 一、效果预览最终效果一只白白胖胖的鹈鹕骑着红色自行车在蓝天白云绿树的背景下欢快前行。轮子飞转、踏板旋转、翅膀微拍、嘴囊晃动配合背景滚动营造出前进的视觉效果。在线演示https://pelican-bicycle-em3m275mm12.qoder.zone## 二、技术选型| 技术 | 用途 ||------|------|| **SVG** | 绘制所有图形元素鹈鹕、自行车、背景 || **CSS keyframes** | 所有动画效果 || **CSS transform** | 旋转、缩放、位移变换 |**为什么不用 JavaScript** 纯 CSS 动画性能更好GPU 加速代码更简洁且完全满足本场景的需求。## 三、整体架构├── 背景层天空渐变 太阳 云朵 远山 地面 路├── 场景元素层树木 路标从右向左移动营造前进感├── 自行车辆车架 轮子 踏板 链条└── 鹈鹕层身体 头 嘴囊 翅膀 腿## 四、核心动画拆解### 4.1 轮子旋转csskeyframes wheelSpin {from { transform: rotate(0deg); }to { transform: rotate(360deg); }}.wheel-front {animation: wheelSpin 1.2s linear infinite;transform-origin: 580px 340px; /* 圆心作为旋转原点 */}**关键点**transform-origin 必须设置为轮子的圆心坐标否则轮子会跑偏。### 4.2 踏板旋转csskeyframes pedalSpin {from { transform: rotate(0deg); }to { transform: rotate(360deg); }}.pedal-group {animation: pedalSpin 1.2s linear infinite;transform-origin: 490px 340px; /* 中轴中心 */}踏板和轮子使用相同的 1.2s 周期保持同步。### 4.3 鹈鹕身体颠簸csskeyframes pelicanBob {0%, 100% { transform: translateY(0px); }50% { transform: translateY(-4px); }}.pelican-group {animation: pelicanBob 0.6s ease-in-out infinite;}微小的上下颠簸4px让鹈鹕看起来更自然仿佛在感受路面的颠簸。### 4.4 翅膀拍打csskeyframes wingFlap {0%, 100% { transform: rotate(0deg); }25% { transform: rotate(-8deg); }75% { transform: rotate(5deg); }}翅膀以身体连接点为原点做小幅度来回摆动。### 4.5 嘴囊弹性抖动csskeyframes pouchWobble {0%, 100% { transform: scaleX(1) scaleY(1); }30% { transform: scaleX(1.05) scaleY(0.97); }70% { transform: scaleX(0.97) scaleY(1.03); }}通过 scaleX 和 scaleY 的反向变化模拟嘴囊的弹性形变效果。### 4.6 背景滚动前进感