HTML5模拟自行车行驶动画特效

新建html文档。

书写hmtl代码。

书写css代码。html {background-color: #78D89B;}.container {  height: 100%;  display: -web  kit-box;  display: -web  kit-flex;  display: -ms-flexbox;  display: flex;  -web  kit-box-pack: center;  -web  kit-justify-content: center;      -ms-flex-pack: center;          justify-content: center;  -web  kit-box-align: center;  -web  kit-align-items: center;      -ms-flex-align: center;          align-items: center; }

书写css3动画特效代码。.st0{fill:#1E0F02;}.st1{fill:none;}.st2{fill:#23110D;}.st3{fill:#FFFFFF;}.st4{fill:#E14C00;}.st5{fill:#807B7C;}.st6{fill:#4D4A4A;}.st7{fill:#6A1D02;}.st8{fill:#6EC48C;}.st9{fill:#64B380;}.st10{fill:#807B7C;}.st11{fill: none; stroke:none; stroke-miterlimit='10'}.bg{fill:url(#pattern);}

代码整体结构。

查看效果。