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

本篇内容介绍了“如何用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;
/*animation: pulse 2s linear infinite;*/
}
#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); /* izza not workingz! */
}

@-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);
   }
}

@-webkit-keyframes rightleg {
   0%{
       -webkit-transform: rotate(25deg);
               transform: rotate(25deg);
   }
   50%{
       -webkit-transform: rotate(-40deg);
               transform: rotate(-40deg);
   }
   100%{
       -webkit-transform: rotate(25deg);
               transform: rotate(25deg);
   }
}

@keyframes rightleg {
   0%{
       -webkit-transform: rotate(25deg);
               transform: rotate(25deg);
   }
   50%{
       -webkit-transform: rotate(-40deg);
               transform: rotate(-40deg);
   }
   100%{
       -webkit-transform: rotate(25deg);
               transform: rotate(25deg);
   }
}

@-webkit-keyframes rightarm {
   0%{
       -webkit-transform: rotate(0deg);
               transform: rotate(0deg);
   }
   50%{
       -webkit-transform: rotate(40deg);
               transform: rotate(40deg);
   }
   100%{
       -webkit-transform: rotate(0deg);
               transform: rotate(0deg);
   }
}

@keyframes rightarm {
   0%{
       -webkit-transform: rotate(0deg);
               transform: rotate(0deg);
   }
   50%{
       -webkit-transform: rotate(40deg);
               transform: rotate(40deg);
   }
   100%{
       -webkit-transform: rotate(0deg);
               transform: rotate(0deg);
   }
}

@-webkit-keyframes leftarm {
   0%{
       -webkit-transform: rotate(50deg);
               transform: rotate(50deg);
   }
   50%{
       -webkit-transform: rotate(0deg);
               transform: rotate(0deg);
   }
   100%{
       -webkit-transform: rotate(50deg);
               transform: rotate(50deg);
   }
}

@keyframes leftarm {
   0%{
       -webkit-transform: rotate(50deg);
               transform: rotate(50deg);
   }
   50%{
       -webkit-transform: rotate(0deg);
               transform: rotate(0deg);
   }
   100%{
       -webkit-transform: rotate(50deg);
               transform: rotate(50deg);
   }
}

@-webkit-keyframes head {
   0%{
       -webkit-transform: rotate(0deg);
               transform: rotate(0deg);
   }
   50%{
       -webkit-transform: rotate(-5deg);
               transform: rotate(-5deg);
   }
   100%{
       -webkit-transform: rotate(0deg);
               transform: rotate(0deg);
   }
}

@keyframes head {
   0%{
       -webkit-transform: rotate(0deg);
               transform: rotate(0deg);
   }
   50%{
       -webkit-transform: rotate(-5deg);
               transform: rotate(-5deg);
   }
   100%{
       -webkit-transform: rotate(0deg);
               transform: rotate(0deg);
   }
}

@-webkit-keyframes pulse {
   0%{
       -webkit-transform: scale(1);
               transform: scale(1);
   }
   50%{
       -webkit-transform: scale(1.1);
               transform: scale(1.1);
   }
   100%{
       -webkit-transform: scale(1);
               transform: scale(1);
   }
}

@keyframes pulse {
   0%{
       -webkit-transform: scale(1);
               transform: scale(1);
   }
   50%{
       -webkit-transform: scale(1.1);
               transform: scale(1.1);
   }
   100%{
       -webkit-transform: scale(1);
               transform: scale(1);
   }
}

@-webkit-keyframes eyebrows {
   0%{
       
   }
   98%{
       -webkit-transform: translate(0, 0px);
               transform: translate(0, 0px);
   }
   99%{
       -webkit-transform: translate(0, -5px);
               transform: translate(0, -5px);
   }
   100%{
       -webkit-transform: translate(0, 0px);
               transform: translate(0, 0px);
   }
}

@keyframes eyebrows {
   0%{
       
   }
   98%{
       -webkit-transform: translate(0, 0px);
               transform: translate(0, 0px);
   }
   99%{
       -webkit-transform: translate(0, -5px);
               transform: translate(0, -5px);
   }
   100%{
       -webkit-transform: translate(0, 0px);
               transform: translate(0, 0px);
   }
}

“如何用html5和css3实现小机器人走路动画”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！