之前介绍了好多款html5和css3实现的动画，今天要给大家带来一款html5和css3实现的小机器人走路动画。该实例的人物用html5绘画的，动画效果是html5和css3实现的。一起看下效果图。

 

　　实现的代码。

 

　　html代码：

 

　　复制代码代码如下:

 

　　x="0px" y="0px" viewbox="0 0 458 337" enable-background="new 0 0 458 337" xml:space="preserve">

 

　　y1="180.6" x2="266.4" y2="181.7" />

 

　　y1="177.4" x2="288.4" y2="164.6" />

 

　　r="3.8" />

 

　　r="3.8" />

 

　　gradientunits="userSpaceOnUse">

 

　　css3代码：

 

　　复制代码代码如下:

 

　　html {

 

　　-moz-box-sizing: border-box;

 

　　box-sizing: border-box;

 

　　}

 

　　*, *:before, *:after {

 

　　-moz-box-sizing: inherit;

 

　　box-sizing: inherit;

 

　　}

 

　　html,body {

 

　　height:100%;

 

　　margin: 0;

 

　　font: 40px/40px "Helvetica Neue";

 

　　font-weight: 900;

 

　　color: rgba(255, 255, 255, 1);

 

　　-webkit-font-smoothing: antialiased;

 

　　font-smoothing: antialiased;

 

　　}

 

　　svg {

 

　　width: 100%;

 

　　height: 100%;

 

　　}

 

　　#left-eye {

 

　　-webkit-transform-origin: 283px 176px;

 

　　-ms-transform-origin: 283px 176px;

 

　　transform-origin: 283px 176px;

 

　　}

 

　　#head {

 

　　-webkit-transform-origin: 235px 173px;

 

　　-ms-transform-origin: 235px 173px;

 

　　transform-origin: 235px 173px;

 

　　-webkit-animation: head 2s ease-in-out infinite;

 

　　animation: head 2s ease-in-out infinite;

 

　　}

 

　　#right-eyebrow, #left-eyebrow {

 

　　-webkit-animation: eyebrows 10s linear infinite;

 

　　animation: eyebrows 10s linear infinite;

 

　　}

 

　　#left-leg {

 

　　-webkit-transform-origin: 253px 225px;

 

　　-ms-transform-origin: 253px 225px;

 

　　transform-origin: 253px 225px;

 

　　-webkit-animation: leftleg 2s ease-in-out infinite;

 

　　animation: leftleg 2s ease-in-out infinite;

 

　　}

 

　　#right-leg {

 

　　-webkit-transform-origin: 225px 235px;

 

　　-ms-transform-origin: 225px 235px;

 

　　transform-origin: 225px 235px;

 

　　-webkit-animation: rightleg 2s ease-in-out infinite;

 

　　animation: rightleg 2s ease-in-out infinite;

 

　　}

 

　　#left-arm {

 

　　-webkit-transform-origin: 263px 186px;

 

　　-ms-transform-origin: 263px 186px;

 

　　transform-origin: 263px 186px;

 

　　-webkit-animation: leftarm 2s ease-in-out infinite;

 

　　animation: leftarm 2s ease-in-out infinite;

 

　　}

 

　　#right-arm {

 

　　-webkit-transform-origin: 209px 214px;

 

　　-ms-transform-origin: 209px 214px;

 

　　transform-origin: 209px 214px;

 

　　-webkit-animation: rightarm 2s ease-in-out infinite;

 

　　animation: rightarm 2s ease-in-out infinite;

 

　　}

 

　　#hair {

 

　　-webkit-filter: hue-rotate(45deg);

 

　　filter: hue-rotate(45deg);

 

　　}

 

　　@-webkit-keyframes leftleg {

 

　　0%{

 

　　-webkit-transform: rotate(0deg);

 

　　transform: rotate(0deg);

 

　　}

 

　　50%{

 

　　-webkit-transform: rotate(55deg);

 

　　transform: rotate(55deg);

 

　　}

 

　　100%{

 

　　-webkit-transform: rotate(0deg);

 

　　transform: rotate(0deg);

 

　　}

 

　　}

 

　　@keyframes leftleg {

 

　　0%{

 

　　-webkit-transform: rotate(0deg);

 

　　transform: rotate(0deg);

 

　　}

 

　　50%{

 

　　-webkit-transform: rotate(55deg);

 

　　transform: rotate(55deg);

 

　　}

 

　　100%{

 

　　-webkit-transform: rotate(0deg);

 

　　transform: rotate(0deg);

 

　　}

 

　　}