一款CSS3+SVG的超人飞行动画特效，背景的运动模糊和流光特效，超人身后的彩色光影效果，都是挺棒的效果，另外，超人的眼睛还眨呀眨的，挺有意思的，可以放到页面加载的时候作为loading动画蛮有个性的，喜欢的童鞋请收下吧。
关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。
页面的head部分，需引入页面的样式文件，代码如下：
<link type="text/css" rel="stylesheet" href="css/style.css" />页面的body部分，html元素比较多，绘图的内容比较繁琐了一点，代码如下：
<div id="screen1">
<svg version="1.1" id="devman" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 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">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="1003.7168" y1="97.4979" x2="1003.7168" y2="965.6392" gradientTransform="matrix(-4.489700e-11 -1 -1 4.489700e-11 1211.5673 1211.5673)">
<stop offset="0" style="stop-color:#00AEEF" />
<stop offset="1" style="stop-color:#000000;stop-opacity:0" />
</linearGradient>
<polygon fill="url(#SVGID_1_)" points="1571.4,183.7 1839.3,183.7 1839.3,232 1832.2,232 1832.2,226.9 -540,226.9 -540,197.5
1571.4,197.5 " />
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="1060.0645" y1="193.7215" x2="1060.0645" y2="991.7781" gradientTransform="matrix(-4.489700e-11 -1 -1 4.489700e-11 1211.5673 1211.5673)">
<stop offset="0" style="stop-color:#008ABE" />
<stop offset="1" style="stop-color:#000000;stop-opacity:0" />
</linearGradient>
<polygon fill="url(#SVGID_2_)" points="1576.6,121.5 1580,121.5 1580,181.5 1571.4,181.5 1571.4,177 -540,177 -540,132.5
1576.6,132.5 " />
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="1148.2195" y1="-308.2337" x2="1148.2195" y2="681.9942" gradientTransform="matrix(-4.489700e-11 -1 -1 4.489700e-11 1211.5673 1211.5673)">
<stop offset="0" style="stop-color:#00AEEF" />
<stop offset="1" style="stop-color:#000000;stop-opacity:0" />
</linearGradient>
<polygon fill="url(#SVGID_3_)" points="2008,50.2 2008,76.5 2005.2,76.5 2005.2,67.2 -540,67.2 -540,50.2 " />
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="1020.9952" y1="-206.7266" x2="1020.9952" y2="821.0875" gradientTransform="matrix(-4.489700e-11 -1 -1 4.489700e-11 1211.5673 1211.5673)">
<stop offset="0" style="stop-color:#00AEEF" />
<stop offset="1" style="stop-color:#000000;stop-opacity:0" />
</linearGradient>
<rect x="-540" y="183.7" fill="url(#SVGID_4_)" width="2111.4" height="13.8" />
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="1032.2737" y1="183.351" x2="1032.2737" y2="986.7203" gradientTransform="matrix(-4.489700e-11 -1 -1 4.489700e-11 1211.5673 1211.5673)">
<stop offset="0" style="stop-color:#008ABE" />
<stop offset="1" style="stop-color:#000000;stop-opacity:0" />
</linearGradient>
<rect x="-540" y="177" fill="url(#SVGID_5_)" width="2111.4" height="4.5" />
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="982.0814" y1="91.3785" x2="982.0814" y2="962.7315" gradientTransform="matrix(-4.489700e-11 -1 -1 4.489700e-11 1211.5673 1211.5673)">
<stop offset="0" style="stop-color:#00AEEF" />
<stop offset="1" style="stop-color:#000000;stop-opacity:0" />
</linearGradient>
<rect x="-540" y="226.9" fill="url(#SVGID_6_)" width="2372.2" height="5.1" />
<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="1084.567" y1="189.5999" x2="1084.567" y2="989.768" gradientTransform="matrix(-4.489700e-11 -1 -1 4.489700e-11 1211.5673 1211.5673)">
<stop offset="0" style="stop-color:#008ABE" />
<stop offset="1" style="stop-color:#000000;stop-opacity:0" />
</linearGradient>
<rect x="-540" y="121.5" fill="url(#SVGID_7_)" width="2116.6" height="11.1" />
<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="1139.6808" y1="-310.5708" x2="1139.6808" y2="680.7806" gradientTransform="matrix(-4.489700e-11 -1 -1 4.489700e-11 1211.5673 1211.5673)">
<stop offset="0" style="stop-color:#00AEEF" />
<stop offset="1" style="stop-color:#000000;stop-opacity:0" />
</linearGradient>
<rect x="-540" y="67.2" fill="url(#SVGID_8_)" width="2545.2" height="9.3" />
</g>
<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="1024.3059" y1="-232.9818" x2="1024.3059" y2="1162.5428" gradientTransform="matrix(-4.489700e-11 -1 -1 4.489700e-11 1211.5673 1211.5673)">
<stop offset="0" style="stop-color:#00AEEF" />
<stop offset="1" style="stop-color:#000000;stop-opacity:0" />
</linearGradient>
<polygon fill="url(#SVGID_9_)" points="1571.4,181.5 1571.4,183.7 1571.4,197.5 -540,197.5 -540,197.5 -540,177 -540,177
1571.4,177 " />
<linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="966.5306" y1="-194.8019" x2="966.5306" y2="810.1349" gradientTransform="matrix(-4.489700e-11 -1 -1 4.489700e-11 1211.5673 1211.5673)">
<stop offset="0" style="stop-color:#008ABE" />
<stop offset="1" style="stop-color:#000000;stop-opacity:0" />
</linearGradient>
<polygon fill="url(#SVGID_10_)" points="1832.2,232 1832.2,263.1 -540,263.1 -540,226.9 -540,226.9 1832.2,226.9 " />
<linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="1092.6057" y1="256.8444" x2="1092.6057" y2="1157.1801" gradientTransform="matrix(-4.489700e-11 -1 -1 4.489700e-11 1211.5673 1211.5673)">
<stop offset="0" style="stop-color:#2E2E2E" />
<stop offset="1" style="stop-color:#000000;stop-opacity:0" />
</linearGradient>
<polygon fill="url(#SVGID_11_)" points="-540,106 1576.6,106 1576.6,121.5 1576.6,132.5 -540,132.5 -540,132.5 -540,105.4
-540,105.4 " />
<linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="1124.9304" y1="583.1299" x2="1124.9304" y2="1130.3929" gradientTransform="matrix(-4.489700e-11 -1 -1 4.489700e-11 1211.5673 1211.5673)">
<stop offset="0" style="stop-color:#FFD000" />
<stop offset="0.6305" style="stop-color:#000000;stop-opacity:0" />
</linearGradient>
<polygon class="beam__1" fill="url(#SVGID_12_)" points="2005.2,76.5 2005.2,106 1576.6,106 -540,106 -540,105.4 -540,67.2 -540,67.2 2005.2,67.2
" />
<path class="cape__1" fill="#E2A500" d="M1959.3,131.4c-2.4-11.3-12.1-56.2-73.4-62.2c-61.3-6-362.9,0-362.9,0s-171.1,4.3-174.5,4.3
s14.7,7.8,16.4,12.1c1.7,4.3-89,18.1-83.8,18.1c55.3,3.5,96.8,15.6,96.8,19c0,3.5,0.9,18.1,0.9,18.1l546,24.2
C1924.8,165.1,1963.6,151.3,1959.3,131.4z" />
<path class="cape__2" fill="#D09300" d="M1744.7,66.5c61.8-0.2,118.3,0.4,141.2,2.7c23,2.3,38.7,10,49.5,19.3c0.5,2,1.9,3.6,4.7,4.5
c1.1,1.1,2.1,2.3,3.1,3.4c0,0,0,0,0.1,0.1c1,1.2,1.9,2.3,2.7,3.5l-37.5,48.9c0,0-259.9,0-349,0l-37.7-1.7
c-29.1-6.2,17.3-27.7,23.8-28.5c7.5-0.9,56.6-2.8,56.6-2.8s27.3-17,35.8-18.9c8.5-1.9,39.6-5.7,51.8-5.7
c12.3,0,48.1-12.3,48.1-12.3S1734.3,72.2,1744.7,66.5z" />
<path class="cape__3" fill="#D09300" d="M1894.6,78.6c-10.7-2.5-437.3,5.8-472.9,5.8s-50.4,9.1,50.4,9.9s409.2,0,409.2,0L1894.6,78.6z" />
<path class="cape__4" fill="#D09300" d="M1752.4,104.3c0,0-261.2,0-320.8,0s-45.5,5-10.7,5c34.7,0,86,0,122.4,0c36.4,0,71.9,5-28.1,5
c-100,0-23.1,6.6,46.3,6.6c69.4,0,195.9,0,195.9,0L1752.4,104.3z" />
<polygon fill="#D09300" points="1627.5,132.4 1398.5,132.4 1477.1,139.8 1648.2,139.8 " />
<path fill="#1C1C1C" d="M1287.7,155c8.9,1,60.6-0.7,68.5-2.4c7.9-1.7,24-2.1,24-2.1l96.5,10.2c-2.2,5.3-4.5,9.9-6.5,11.2
c-5.4,3.5-8.5,16.7-6.6,22.1c0.5,1.4,1.1,2.5,1.7,3.3c-30.3-6.5-69.5-14.2-75.6-14.7c-9.9-0.7-53.7-3.1-69.5-5.1
c-15.7-2.1-37.7-11.6-40.1-15.1C1277.7,159.2,1278.8,154,1287.7,155z" />
<g>
<path fill="#008ABE" d="M1465.2,197.4c-0.6-0.8-1.2-1.9-1.7-3.3c-1.9-5.4,1.2-18.6,6.6-22.1c2-1.3,4.3-5.9,6.5-11.2l-55.2-5.9
l139.4,14.8c0,0,130.8,8.6,111.3,40.1c-9.3,15-44.2,17.5-83.9,16.8c-38-0.7-52.7-9.2-58.5-12.7c-8.2-3.4-26.4-5.8-28.4-7.9
c-0.8-0.8-16.9-4.5-36.6-8.7C1464.8,197.4,1465,197.4,1465.2,197.4z" />
</g>
<path fill="#00AEEF" d="M1960.2,152.9c-1.2,18.5-19.1,75-62.5,97.1c-43.4,22.1-94.9,16.6-122.9-1.5c-12.5-8.1-25.7-17.7-32.4-19.9
s-41.2-9.6-41.2-9.6v-92c0,0,97.8-9.6,113.3-14.7s89.7-28,107.4-22.8C1939.6,94.7,1963.1,108.7,1960.2,152.9z" />
<path fill="#2E2E2E" d="M1711.8,211.5c-0.8,3.8-2.7,10.6-4.8,10.6c-2.1,0-20.5,1.7-60.6-9.9c-3.8-2.7-0.3-6.2-0.3-6.2
s35.6-10.6,39.7-32.2c4.1-21.6-16.1-45.9-32.9-49.6c-9.9-3.4-1.4-3.4-1.4-3.4s70.2,1.4,71.2,4.5
C1723.8,128.3,1713.2,205,1711.8,211.5z" />
<g>
<path fill="#00AEEF" d="M1463.1,142.9c2.5-9.3,4.3-14.9,7.2-17.3c6-0.7,10.8-1.1,13.5-1.1c13.4,0,38.3,34.2,39.4,32.5
c1-1.7,6.2-1.4,10.6-6.2c3.1-7.5,101.3-54.4,145.8-15.1c12.5,11.1,13,71.2-25,80.4c-38,9.2-88.7,4.5-102,1.7
c-13.4-2.7-15.4-12.3-18.8-13c-3.4-0.7-16.4-15.4-17.5-16.8c-1.8,0-26.3-5.3-53.8-12.1C1459.4,170.5,1459.9,155.3,1463.1,142.9z" />
</g>
<!-- 省略部分演示代码 -->
</svg>
</div>
<div class="particles"></div>
<div class="particles"></div>
<div class="particles"></div>
系统已开启自动识别垃圾评论机制，识别到的自动封号，下载出错或者资源有问题请联系全栈客服QQ 1915635791