html5 css!3实例教程

2020-03-24 16:09:34

字体：大中小

来源：转载

供稿：网友

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

　　实现的代码。

　　html代码：

代码如下:<svg version="1.1" id="Layer_1" xmlns="http://www.jb51.net/2000/svg" xmlns:xlink="http://www..jb51.net/1999/xlink"

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

<g id="left-arm">

<g>

<path 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.4

c1.2-2.2,1-5.7-0.4-7.7l-5.2-7.5C285.8,208.8,274.7,214.1,264,216.2z" />

<path fill="#FDB473" d="M282.9,208.4l8.3,7.8c1.4,2.1,3.6,1.9,4.8-0.3l0.7-1.3c1.2-2.2,1-5.7-0.4-7.7l-4.4-8.9

C289.8,202.2,286.7,205.6,282.9,208.4z" />

</g>

<g>

<path fill="#262626" d="M291.1,199.4l-20.2-29.1c-1.4-2.1-4.6-3.5-7.1-3.1l-15.7,2.2c-2.5,0.4-5.5,2.4-6.7,4.6l-0.7,1.4

c-1.2,2.2-1,5.7,0.4,7.7l22.8,32.9C274.7,214.1,285.8,208.8,291.1,199.4z" />

<path d="M287.8,189.9l-16.8-19.6c-1.4-2.1-3.6-1.9-4.8,0.3l-0.7,1.3c-1.2,2.2-1,5.7,0.4,7.7l16,27.8l1,1c3.8-2.7,6.9-6.2,8.9-10.3

L287.8,189.9z" />

<path fill="#7F7F7F" stroke="#000000" stroke-width="0.9111" d="M263.8,167.2c2.5-0.4,3.5,1.2,2.3,3.4l-0.8,1.4

c-1.2,2.2-4.2,4.3-6.7,4.6l-15.7,2.2c-2.5,0.4-3.5-1.2-2.3-3.3l0.8-1.4c1.2-2.2,4.2-4.3,6.7-4.6L263.8,167.2z" />

</g>

</g>

<g id="left-leg">

<path fill="#262626" stroke="#000000" stroke-width="0.9111" d="M283.7,246c1.3-2.1,1.4-5.6,0.1-7.7L265.4,208

c-1.3-2.1-4.4-3.7-6.9-3.5l-17.8,1.5c-2.5,0.2-5.6,2.1-7,4.2l-7.3,11.7c-1.3,2.1-1.4,5.6-0.1,7.8l18.3,30.2

c1.3,2.1,4.4,3.7,6.9,3.5l17.7-1.4c2.5-0.2,5.6-2.1,7-4.2L283.7,246z" />

<path fill="#BFBFBF" stroke="#000000" stroke-width="0.9111" d="M232.5,224.3l-6.1-2.5c-1.3,2.1-1.4,5.6-0.1,7.8L232.5,224.3z" />

<path d="M283.7,238.2c1.3,2.1,1.3,5.6-0.1,7.8l-7.3,11.6c-1.3,2.1-3.5,2.1-4.8,0l-18.3-30.2c-1.3-2.1-1.3-5.6,0.1-7.8l7.3-11.6

c1.3-2.1,3.5-2.1,4.8,0L283.7,238.2z" />

<path fill="#4D4D4D" d="M244.7,259.8c1.3,2.1,4.4,3.7,6.9,3.5l17.7-1.4c2.5-0.2,3.5-2.1,2.2-4.3l-18.3-30.2

c-1.3-2.1-4.4-3.7-6.9-3.5l-17.7,1.4c-2.5,0.2-3.5,2.1-2.2,4.3L244.7,259.8z" />

<path fill="#000" stroke="#000000" stroke-width="0.9111" d="M258.5,204.5c2.5-0.2,3.4,1.4,2.1,3.5l-7.4,11.7

c-1.3,2.1-4.5,4-7,4.2l-17.8,1.5c-2.5,0.2-3.4-1.4-2.1-3.5l7.4-11.7c1.3-2.1,4.5-4,7-4.2L258.5,204.5z" />

</g>

<g id="right-leg">

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：提供超多HTML5+CSS3响应式网页模版免费、下载的酷站

下一篇：使用CSS修改HTML的checkbox效果的小示例分享