html5游戏角色行走,html5 css3实例教程

1、html5游戏角色行走,html5 css3实例教程之前介绍了好多款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:spa

2、ce="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=&

3、quot;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);

4、-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: 2

5、35px 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;tran

6、sform-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: right

7、leg 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-origi

8、n: 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(0de