How to use html5 and css3 to realize small Robot Walking Animation

This article mainly introduces how to use html5 and css3 to achieve small robot walking animation, the article is very detailed, has a certain reference value, interested friends must read it!

The html5 code is as follows:

Css3 Code:

Html {- moz-box-sizing:border-box; box size: border-box;} *, *: before, *: after {- moz-box-sizing: inheritance; resizing: inheritance;}

Html,body {height: 100%; margin: 0; Font: 40px/40px "HelveticaNeue"; Font weight: 900; Color: rgba (255pct 255pm 255pm 1);-webkit-font-smoothing: anti-aliasing; font smoothing: anti-aliasing;}

Svg {width: 100%; height: 100%;}

# left-eye {- webkit-transform-origin:283px176px;-ms-transform-origin:283px176px;transform-origin:283px176px; / * Animation: pulse 2s linear infinite; * /} # head {- webkit-transform-origin:235px173px;-ms-transform-origin:235px173px;transform-origin:235px173px;-webkit-animation:head2s ease into infinity; animation: head 2s ease into infinity;}

# right-eyebrow,#left-eyebrow {- webkit-animation: eyebrow 10s linear infinite; animation: eyebrow 10s linear infinite;}

# left-leg {- webkit-transform-origin:253px225px;-ms-transform-origin:253px225px;transform-origin:253px225px;-webkit-animation: left leg 2s ease into infinity; animation: leftleg2s ease into infinity;}

# right-leg {- webkit-transform-origin:225px235px;-ms-transform-origin:225px235px;transform-origin:225px235px;-webkit-animation:rightleg2s ease into infinity; Animation: rightleg2s ease into infinity;} # left-arm {- webkit-transform-origin:263px186px;-ms-transform-origin:263px186px;transform-origin:263px186px;-webkit-animation: left arm 2s ease into infinity; Animation: left arm 2s ease into infinity;}

# right-arm {- webkit-transform-origin:209px214px;-ms-transform-origin:209px214px;transform-origin:209px214px;-webkit-animation: right arm 2s ease into infinity; Animation: right arm 2s ease into infinity;} # hair {- webkit-filter:hue-rotate (45deg); filter: hue-rotation (45 degrees); / * izza does not work! * /}

@-webkit-keyframesleftleg {0% {- webkit-transform:rotation (0deg); transform: rotate (0deg);} 50% {- webkit-transform: rotation (55deg); transform: rotate (55deg);} 100% {- webkit-transform: rotation (0deg); transform: rotate (0deg);}}

@ keyframesleftleg {0% {- webkit-transform:rotation (0deg); transform: rotate (0deg);} 50% {- webkit-transform: rotation (55deg); transform: rotate (55deg);} 100% {- webkit-transform: rotation (0deg); transform: rotate (0deg);}}

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

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

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

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

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

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

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

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

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

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

@-webkit-keyframes eyebrows {0% {} 98% {- webkit-transform:translate (0px); convert: translate (0memo 0px);} 99% {- webkit-transform:translate (0meme 5px); convert: translate (0meme 5px);} 100% {- webkit-transform:translate (0d0px); convert: translate (0mem0px);}}

@ keyframes eyebrows {0% {} 98% {- webkit-transform:translate (0px); convert: translate (0px);} 99% {- webkit-transform:translate (0px); convert: translate (0px);} 100% {- webkit-transform:translate (0px); convert: translate (0px);}} above are all the contents of this article entitled "how to use html5 and css3 to achieve small Robot Walking Animation". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!