超酷的HTML5超人飞行动画

1、新建html文档。

2、书写hmtl代码。

<div id="screen1">

<svg version="1.1" id="devman"  x="0px" y="0px" viewBox="0 0 2222 337.5" enable-background="new 0 0 2222 337.5" xml:space="preserve">

<g>

<g class="beams" opacity="0.7">

</g></g></svg></div>

<div class="particles"></div>

<div class="particles"></div>

<div class="particles"></div>

3、书写svg代码。

<g>

<path fill="#FFD000" d="M1917.2,229.1c1.2-2.3,1.5-4.2,1-5.7c-0.6-1.7-2.2-2.8-4.8-3.4c-2.8-0.6-6.6-0.5-11.4,0.4

c-5,0.9-11,2.8-17.4,5.5c-6.5,2.8-12.6,6.1-17.9,9.6c-5.1,3.4-9.2,6.8-12.1,10.1c-2.7,3-4.3,5.7-4.8,8c-0.4,2.1,0.3,3.7,1.9,4.9

c1.5,1,3.8,1.5,6.4,1.6c2.5,0.1,5.4-0.2,8.5-0.9c3-0.6,6.2-1.5,9.5-2.6c3.2-1.1,6.6-2.4,10.1-4c3.5-1.6,6.7-3.3,9.8-5.1

c3.1-1.8,6-3.7,8.7-5.7c2.7-2,5.2-4.1,7.3-6.2C1914.3,233.4,1916,231.2,1917.2,229.1z M1857,256c-1.2-1-1.5-2.5-1-4.3

c0.6-1.9,2.1-4.2,4.4-6.7c2.5-2.6,5.9-5.4,10.1-8.1c4.2-2.8,9.1-5.4,14.3-7.6c5.1-2.2,9.9-3.7,14-4.6c3.9-0.8,7.2-1,9.6-0.6

c2.3,0.4,3.8,1.2,4.5,2.5c0.6,1.2,0.5,2.7-0.3,4.6c-0.8,1.7-2.2,3.6-4,5.4c-1.7,1.8-3.8,3.6-6.2,5.3c-2.3,1.7-4.8,3.4-7.5,5

c-2.7,1.6-5.6,3.1-8.6,4.5c-3.1,1.4-6.1,2.6-8.9,3.5c-2.9,1-5.7,1.7-8.2,2.2c-2.7,0.5-5.1,0.7-7.1,0.6

C1859.8,257.5,1858.1,256.9,1857,256" />

</g>

4、书写svg代码。

<g>

<path fill="#2E2E2E" d="M1912.6,231.1c0.9-1.8,0.9-3.4,0.3-4.6c-0.7-1.3-2.2-2.1-4.5-2.5c-2.4-0.4-5.7-0.2-9.6,0.6

c-4.1,0.9-8.9,2.4-14,4.6c-5.2,2.2-10.1,4.9-14.3,7.6c-4.1,2.7-7.6,5.5-10.1,8.1c-2.4,2.5-3.9,4.7-4.4,6.7

c-0.5,1.8-0.2,3.3,1,4.3c1.1,1,2.9,1.5,5,1.6c2,0.1,4.5-0.1,7.1-0.6c2.5-0.5,5.3-1.2,8.2-2.2c2.8-0.9,5.8-2.1,8.9-3.5

c3-1.4,5.9-2.9,8.6-4.5c2.7-1.6,5.3-3.3,7.5-5c2.4-1.8,4.5-3.6,6.2-5.3C1910.4,234.7,1911.8,232.8,1912.6,231.1z M1872.1,244.6

c-0.1-0.3-0.1-0.7,0.2-1.2c0.3-0.5,0.7-1,1.3-1.5c0.6-0.5,1.4-1.1,2.3-1.6c0.9-0.5,1.9-1.1,3-1.5l27.3-11.9l-3.9,3.6l-23,10.1

c-0.3,0.2-0.7,0.3-1,0.5c-0.3,0.2-0.5,0.4-0.8,0.5c-0.2,0.2-0.4,0.3-0.5,0.5c-0.1,0.2-0.1,0.3-0.1,0.4c0,0.1,0.1,0.2,0.3,0.2

c0.2,0,0.4,0,0.6,0c0.2,0,0.5-0.1,0.8-0.2c0.3-0.1,0.6-0.2,1-0.4l11.9-5.3c1-0.4,1.9-0.7,2.7-1c0.8-0.2,1.5-0.4,2.1-0.4

c0.6,0,1,0,1.3,0.2c0.3,0.2,0.4,0.4,0.3,0.8c-0.1,0.3-0.3,0.7-0.7,1.2c-0.4,0.4-0.9,0.9-1.5,1.3c-0.6,0.5-1.3,0.9-2,1.4

c-0.8,0.4-1.6,0.9-2.4,1.3l-10.7,4.8c-0.3,0.1-0.6,0.3-0.8,0.4c-0.3,0.1-0.5,0.3-0.7,0.4c-0.2,0.1-0.3,0.3-0.4,0.4

c-0.1,0.1-0.1,0.2-0.1,0.3c0,0.1,0.1,0.1,0.2,0.2c0.1,0,0.3,0,0.5,0c0.2,0,0.4-0.1,0.7-0.2c0.3-0.1,0.5-0.2,0.8-0.3l10.3-4.6

c0.8-0.4,1.6-0.7,2.3-0.9c0.7-0.2,1.3-0.4,1.8-0.4c0.5-0.1,0.9,0,1.1,0.1c0.2,0.1,0.4,0.3,0.3,0.6c-0.1,0.3-0.3,0.6-0.6,0.9

c-0.3,0.3-0.8,0.7-1.3,1.1c-0.5,0.4-1.1,0.8-1.8,1.2c-0.7,0.4-1.4,0.8-2.1,1.1l-20.4,9.3l2.1-2.1l18.4-8.3

c0.3-0.1,0.5-0.2,0.7-0.4c0.2-0.1,0.4-0.3,0.6-0.4c0.2-0.1,0.3-0.3,0.4-0.4c0.1-0.1,0.2-0.2,0.2-0.3c0-0.1,0-0.1-0.1-0.2

c-0.1,0-0.2,0-0.4,0c-0.2,0-0.4,0.1-0.6,0.1c-0.2,0.1-0.5,0.2-0.8,0.3l-10,4.5c-0.8,0.4-1.6,0.7-2.4,0.9c-0.7,0.2-1.4,0.4-2,0.5

c-0.6,0.1-1.1,0.1-1.5,0.1c-0.4-0.1-0.7-0.2-0.8-0.4c-0.1-0.2,0-0.6,0.2-0.9c0.2-0.4,0.6-0.8,1.2-1.2c0.5-0.4,1.2-0.9,2-1.4

c0.8-0.5,1.6-0.9,2.5-1.3l11-4.9c0.3-0.1,0.6-0.3,0.9-0.4c0.3-0.2,0.5-0.3,0.7-0.5c0.2-0.2,0.4-0.3,0.5-0.5

c0.1-0.1,0.2-0.3,0.2-0.4c0-0.1,0-0.2-0.1-0.2c-0.1,0-0.3-0.1-0.4-0.1c-0.2,0-0.4,0.1-0.7,0.1c-0.3,0.1-0.6,0.2-0.9,0.3

l-11.4,5.1c-0.9,0.4-1.9,0.8-2.7,1c-0.9,0.3-1.7,0.4-2.4,0.5c-0.7,0.1-1.3,0.1-1.8,0C1872.5,245.1,1872.2,244.9,1872.1,244.6" />

</g>

5、代码整体结构。

6、查看效果。