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

1、新建html文档。

2、书写hmtl代码。

<div class="container">

  <svg id="bike" version="1.1" x="0px" y="0px"width="750px"

  height="500px" viewBox="0 0 750 500" style="enable-background:new 0 0 750 500;" xml:space="preserve">

<rect id="city" class="bg

<g id="wheel">

<circle class="st1" cx="234" cy="306.649" r="84.25"/>

</g>

</div>

3、书写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; }

4、书写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);}

5、代码整体结构。

6、查看效果。