如何使用html5和css3实现的小机器人走路动画

这篇文章主要介绍如何使用html5和css3实现的小机器人走路动画，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

html5代码如下：

    <路径fill="＃FDBF88"d="M264,216.2l2.5,3.6c1.4,2.1,4.6,3.5,7.1,3.1l15.6-2.2c2.5-0.4,5.5-2.4,6.7-4.6l0.8-1.4c1.2-2.2,1-5.7-0.4-7.7l-5.2-7.5C285.8,208.8,274.7,214.1,264,216.2z"/>                    <路径fill="＃7F7F7F"stroke="＃000000"stroke-width="0.9111"d="M270.8,169.1c2.2,1.1,2.2,3,0,4.1l-41.5,20.8c-2.2,1.1-5.9,1.1-8.1,0l-23.3-11.7c-2.2-1.1-2.2-3,0-4.1l41.5-20.8c2.2-1.1,5.9-1.1,8.1,0L270.8,169.1z"/><路径fill="＃FDB473"d="M223.7,238.6l5.5,9.2c0.8,2.4,2.9,2.8,4.7,1l1-1.1c1.8-1.8,2.5-5.2,1.7-7.6l-2.5-7.3     C231,236,227.5,237.7,223.7,238.6z"/><路径填充="＃FDBF88"stroke="＃000000"stroke-width="0.9111"d="M288.6,197.1c4.5-2.2,8.2-8.2,8.2-13.2l0-52.5     c0-5-3.7-10.9-8.1-13.2L242,94.9c-4.5-2.2-11.8-2.2-16.3,0l-46.4,23.4c-4.5,2.3-8.1,8.2-8.1,13.2v52.4c0,5，3.7,10.9,8.1,13.2l46.4,23.2c4.5,2.2,11.8,2.2,16.3,0L288.6,197.1z"/>     <圆圈id="左眼"stroke="＃000000"stroke-width="0.9111"cx="283.6"cy="176.5"r="3.8"/>          <停止偏移="0"style="stop-color：＃231F20;stop-opacity：0.3"/>     <椭圆填充="url（＃SVGID_1_）"cx="240"cy="271.3"rx="122.5"ry="31.1"/>

css3代码：

    html{-moz-box-sizing：border-box;框大小：border-box；}*，*：之前，*：之后{-moz-box-sizing：继承;大小调整：继承；}
html，body{高度：100％;边距：0;字体：40px/40px"HelveticaNeue";字体粗细：900；颜色：rgba（255，255，255，1）;-webkit-font-smoothing：抗锯齿；字体平滑：抗锯齿；}
svg{宽度：100％；高度：100％;}
＃left-eye{-webkit-transform-origin：283px176px;-ms-transform-origin：283px176px;transform-origin：283px176px;     /*动画：脉冲2s线性无限；*/}#head{-webkit-transform-origin：235px173px;-ms-transform-origin：235px173px;transform-origin：235px173px;-webkit-animation：head2s缓入无限；动画：头部2s缓入无限；}
＃right-eyebrow，＃left-eyebrow{-webkit-animation：眉毛10s线性无穷；动画：眉毛10s线性无限；}
＃left-leg{-webkit-transform-origin：253px225px;-ms-transform-origin：253px225px;transform-origin：253px225px;-webkit-animation：左腿2s缓入无限；     动画：leftleg2s缓入无限；}
＃right-leg{-webkit-transform-origin：225px235px;-ms-transform-origin：225px235px;transform-origin：225px235px;-webkit-animation：rightleg2s缓入无限；动画：rightleg2s缓入无限；}＃left-arm{-webkit-transform-origin：263px186px;-ms-transform-origin：263px186px;transform-origin：263px186px;-webkit-animation：左臂2s缓入无限；动画：左臂2s缓入无限；}
＃right-arm{-webkit-transform-origin：209px214px;     -ms-transform-origin：209px214px;transform-origin：209px214px;-webkit-animation：右臂2s缓入无限；动画：右臂2s缓入无限；}#hair{-webkit-filter：hue-rotate（45deg）;滤镜：色相-旋转（45度）;/*izza不工作！*/}
@-webkit-keyframesleftleg{0％{-webkit-transform：rotation（0deg）;变换：rotate（0deg）;}50％{-webkit-transform：旋转（55deg）；变换：rotate（55deg）;}100％{-webkit-transform：旋转（0deg）；     变换：rotate（0deg）;}}
@keyframesleftleg{0％{-webkit-transform：rotation（0deg）;变换：rotate（0deg）;}50％{-webkit-transform：旋转（55deg）；变换：rotate（55deg）;}100％{-webkit-transform：旋转（0deg）；变换：rotate（0deg）;}}
@-webkit-keyframesrightleg{0％{-webkit-transform：rotation（25deg）;变换：rotate（25deg）;}50％{-webkit-transform：旋转（-40deg）;     变换：rotate（-40deg）;}100％{-webkit-transform：旋转（25deg）；变换：rotate（25deg）;}}
@keyframesrightleg{0％{-webkit-transform：rotation（25deg）;变换：rotate（25deg）;}50％{-webkit-transform：旋转（-40deg）;变换：rotate（-40deg）;}100％{-webkit-transform：旋转（25deg）；变换：rotate（25deg）;}}
@-webkit-keyframes右臂{0％{-webkit-transform：rotation（0deg）;     变换：rotate（0deg）;}50％{-webkit-transform：旋转（40deg）；变换：rotate（40deg）;}100％{-webkit-transform：rotation（0deg）;变换：rotate（0deg）;}}
@keyframes右臂{0％{-webkit-transform：rotation（0deg）;变换：rotate（0deg）;}50％{-webkit-transform：旋转（40deg）；变换：rotate（40deg）;}100％{-webkit-transform：旋转（0deg）；变换：rotate（0deg）;}     }
@-webkit-keyframes左臂{0％{-webkit-transform：rotation（50deg）;变换：rotate（50deg）;}50％{-webkit-transform：rotation（0deg）;变换：rotate（0deg）;}100％{-webkit-transform：旋转（50deg）；变换：rotate（50deg）;}}
@keyframes左臂{0％{-webkit-transform：rotation（50deg）;变换：rotate（50deg）;}50％{-webkit-transform：rotation（0deg）;变换：rotate（0deg）;}100％{     -webkit-transform：旋转（50deg）;变换：rotate（50deg）;}}
@-webkit-keyframes头{0％{-webkit-transform：rotation（0deg）;变换：rotate（0deg）;}50％{-webkit-transform：旋转（-5deg）;变换：rotate（-5deg）;}100％{-webkit-transform：旋转（0deg）；变换：rotate（0deg）;}}
@keyframes头{0％{-webkit-transform：旋转（0deg）;变换：rotate（0deg）;}50％{     -webkit-transform：旋转（-5deg）;变换：rotate（-5deg）;}100％{-webkit-transform：旋转（0deg）；变换：rotate（0deg）;}}
@-webkit-keyframespulse{0％{-webkit-transform：scale（1）;转换：scale（1）;}50％{-webkit-transform：scale（1.1）;转换：scale（1.1）;}100％{-webkit-transform：scale（1）;转换：scale（1）;}}
@关键帧脉冲{0％{     -webkit-transform：scale（1）;转换：scale（1）;}50％{-webkit-transform：scale（1.1）;转换：scale（1.1）;}100％{-webkit-transform：scale（1）;转换：scale（1）;}}
@-webkit-keyframes眉毛{0％{}98％{-webkit-transform：translate（0，0px）;转换：translate（0，0px）;}99％{-webkit-transform：translate（0，-5px）;转换：translate（0，-5px）;}100％{     -webkit-transform：translate（0，0px）;转换：translate（0，0px）;}}
@keyframes眉毛{0％{}98％{-webkit-transform：translate（0，0px）;转换：translate（0，0px）;}99％{-webkit-transform：translate（0，-5px）;转换：translate（0，-5px）;}100％{-webkit-transform：translate（0，0px）;转换：translate（0，0px）;}}

以上是"如何使用html5和css3实现的小机器人走路动画"这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注行业资讯频道！