前端JS特效第13集:HTML5-SVG超人飞翔动画特效

HTML5-SVG超人飞翔动画特效,先来看看效果:

部分核心的代码如下(全部代码在文章末尾):

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>SVG动画之超人飞行</title>

<link rel="stylesheet" href="css/style.css" />

</head>
<body>

<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>
		<path fill="#2E2E2E" d="M1462.5,176.1c-23.7-5.9-49.8-12.8-65.7-18.3c-6.5-2.7-21.9-5.5-25.3-5.1c-3.4,0.3-31.8-4.5-31.8-4.5
	s-47.9-2.7-67.8-9.6c-9.2-6.2,8.6-11.3,17.1-11c9.9-1,24.3-10.6,37.3-9.9c13,0.7,34.9,13.4,40.7,12.7c5.8-0.7,18.5-5.8,25.3-1.7
	c6.8,4.1,9.9,6.2,9.9,6.2s43.7-6.6,68-9.2c-2.9,2.4-4.7,8-7.2,17.3C1459.9,155.3,1459.4,170.5,1462.5,176.1z" />
		<path fill="#BB906D" d="M1955.4,178.6l-0.7,1.4c0,0-12.6,28.8-24.7,35.7c-12.1,6.9-11.6,3.9-11.6,3.9l26.2-71.2l6.4-30.3
	L1955.4,178.6z" />
		<g class="head">
				<path fill="#ECC19C" d="M1932.9,195.2c0,0,15.5-35.6,18.1-77.1c-6.5-8.4-13.6-14.9-13.6-14.9s47.3-42.8,59-50.5
	s55.1-8.4,55.1,27.9s-22.7,103-22.7,103s7.8,6.5,3.2,16.8s-12.3,13-33.7,1.3c-21.4-11.7-33.7-28.5-33.7-28.5L1932.9,195.2z" />
				<path fill="#ECC19C" d="M2034,152.4l18.1,7.8c0,0-6.5-42.1-3.2-68C2034.6,111.6,2034,152.4,2034,152.4z" />
				<path fill="#BB906D" d="M1971.3,141.9c3.1,6.3,19.7,37,26.2,42.7c6.6,5.8,15,10.1,19.1,15c3.6,4.2-1.6,3.3,1.6,6.8
	c1.9,1.2,1.4,2.1-0.8,2.7c-4.8-0.7-11-3-19.1-7.5c-21.4-11.7-33.7-28.5-33.7-28.5C1948.6,151,1938.4,100.3,1971.3,141.9z" />
				<path fill="#ECC19C" d="M2025.5,174.3c0,0,0.1-11,6.5-6.2c6.4,4.9,5.9,5.8,5.2,8.5s-2,4.3-5.2,2.7
	C2030.3,178.5,2025.5,174.3,2025.5,174.3z" />
				<path fill="#2E2E2E" d="M2048.5,125.4c0,0-7.5-3.6-15.6,1.7c-1.1-1.9-6.5-20.9-19.8-28.4s5.1-27.9,5.1-27.9l31.8,22.1l0.3,5.1
	c0,0,0.7,1.5,0.7,2.2c0,0.6-1.1,19.1-1.6,25.2c-0.1,1.2-0.7,1.6-0.7,1.6L2048.5,125.4z" />
				<path fill="#00AEEF" d="M1996.4,52.6c11.7-7.8,55.1-8.4,55.1,27.9c0,5.3-0.5,11.2-1.3,17.4c-4.3-5.1-11.6-11.7-22.5-14.7
	c-10.5,15.3-10.2,43.5-10.2,43.5s-17.3-6.8-40.7,18.8c-1.1,1.2-7.1,3-26.8-16c0.4-3.8-3.4-5.2-3.1-9.1c-6.5-8.4-9.4-17.3-9.4-17.3
	S1984.7,60.4,1996.4,52.6z" />
				<path class="eye" fill="#FFFFFF" d="M2037.8,105.3c0,0-3.5,3.8-5,2.8c-1.5-1-7-10.7-7-10.7L2037.8,105.3z" />
				<path fill="#BB906D" d="M1990.4,77.3c0,0,8.9,9.5-4.6,23.9s-21.3-1.4-18.7-8.6C1969.7,85.3,1990.4,77.3,1990.4,77.3z" />
				<path fill="#DFB28B" d="M1991.1,78.2c1.8,2.7,5.6,11-4.9,22.5c-1.9,0.9-3.6,1.4-4.4,1.5c-2.6,0.5-6.2-2.6-6.2-2.6l13.7-20.7
	L1991.1,78.2z" />
				<path fill="#ECC19C" d="M1975.7,99.6c0,0-17.6-9.5-11.5-23.9s25.3-4.9,27.4,3.2C1993.5,86.9,1992.4,98.7,1975.7,99.6z" />
				<path fill="#DFB28B" d="M2028.8,199.9c-1.2,2.3-3.2,5.2-5.9,5.4c-2.7,0.2-3.1-0.3-4.8-1.3c-1.6,0.5,1,3.4,3.1,3.4
	c2,0,1.4-1.4,1.4-1.4s3,1.2,6.8-5.6c1.5-3.3,1.7-5.7,1.9-6.9c0.1-0.6,0.9-1.1,0.1-1.7c-1.4-1.3-1.4-0.3-0.7,0.9
	C2030.5,194.2,2030.4,196.8,2028.8,199.9z" />
				<path fill="#DFB28B" d="M2028.9,176.8c0.5,0.4,3.9,3.4,5.6,2.9s2.6-1.3,0.4-2.8c-2.2-1.5-6.9-4.7-9.3-5.9
	S2027.6,175.8,2028.9,176.8z" />
				<path fill="#BB906D" d="M2033.4,169.1c-4.8-3.3-24-20.3-24-20.3s4.5-6.7,4.2-6c-0.4,0.7-0.8,6.2-0.8,6.2
	S2025.8,162.3,2033.4,169.1z" />
				<path fill="#BB906D" d="M2052.1,160.2l-19.7-13.6c-0.2-0.1-0.5,0.1-0.3,0.3l5.8,7.2L2052.1,160.2z" />
		</g>
		<path fill="#FFF200" d="M1949.5,116.1c2.6,45.8-13.5,79.2-24.5,95.7c17.4-6.3,29.7-31.9,29.7-31.9c-3.4,9-15,36-27.9,42.6
	c-12.9,6.6-21.1,9.3-21.1,9.3s35.4-59,37.4-105.7c-1.1-7.9-0.8-13.4,0-17.3C1945.6,111.4,1946.8,112.6,1949.5,116.1z" />
		<g class="chest">
				<g>
						<path class="chest__logo" fill="#FFF200" d="M1906.1,226.8l-27.3,11.9c-1.1,0.5-2.1,1-3,1.5c-0.9,0.5-1.7,1.1-2.3,1.6c-0.6,0.5-1.1,1.1-1.3,1.5
	c-0.3,0.5-0.3,0.9-0.2,1.2c0.1,0.3,0.5,0.5,0.9,0.6c0.5,0.1,1.1,0.1,1.8,0c0.7-0.1,1.5-0.3,2.4-0.5c0.9-0.3,1.8-0.6,2.7-1
	l11.4-5.1c0.3-0.1,0.6-0.2,0.9-0.3c0.3-0.1,0.5-0.1,0.7-0.1c0.2,0,0.3,0,0.4,0.1c0.1,0,0.2,0.1,0.1,0.2c0,0.1-0.1,0.2-0.2,0.4
	c-0.1,0.1-0.3,0.3-0.5,0.5c-0.2,0.2-0.4,0.3-0.7,0.5c-0.3,0.2-0.6,0.3-0.9,0.4l-11,4.9c-0.9,0.4-1.8,0.9-2.5,1.3
	c-0.8,0.5-1.4,0.9-2,1.4c-0.5,0.4-0.9,0.8-1.2,1.2c-0.2,0.4-0.3,0.7-0.2,0.9c0.1,0.2,0.4,0.4,0.8,0.4c0.4,0.1,0.9,0,1.5-0.1
	c0.6-0.1,1.3-0.3,2-0.5c0.7-0.2,1.5-0.5,2.4-0.9l10-4.5c0.3-0.1,0.5-0.2,0.8-0.3c0.2-0.1,0.4-0.1,0.6-0.1c0.2,0,0.3,0,0.4,0
	c0.1,0,0.1,0.1,0.1,0.2c0,0.1-0.1,0.2-0.2,0.3c-0.1,0.1-0.3,0.2-0.4,0.4c-0.2,0.1-0.4,0.3-0.6,0.4c-0.2,0.1-0.5,0.3-0.7,0.4
	l-18.4,8.3l-2.1,2.1l20.4-9.3c0.8-0.3,1.5-0.7,2.1-1.1c0.7-0.4,1.3-0.8,1.8-1.2c0.5-0.4,1-0.8,1.3-1.1c0.3-0.3,0.5-0.7,0.6-0.9
	c0.1-0.3-0.1-0.5-0.3-0.6c-0.2-0.1-0.6-0.1-1.1-0.1c-0.5,0.1-1.1,0.2-1.8,0.4c-0.7,0.2-1.5,0.5-2.3,0.9l-10.3,4.6
	c-0.3,0.1-0.6,0.2-0.8,0.3c-0.3,0.1-0.5,0.1-0.7,0.2c-0.2,0-0.4,0-0.5,0c-0.1,0-0.2-0.1-0.2-0.2c0-0.1,0-0.2,0.1-0.3
	c0.1-0.1,0.2-0.3,0.4-0.4c0.2-0.1,0.4-0.3,0.7-0.4c0.3-0.1,0.5-0.3,0.8-0.4l10.7-4.8c0.9-0.4,1.7-0.8,2.4-1.3
	c0.8-0.4,1.4-0.9,2-1.4c0.6-0.5,1.1-0.9,1.5-1.3c0.4-0.4,0.6-0.8,0.7-1.2c0.1-0.3,0-0.6-0.3-0.8c-0.3-0.2-0.7-0.2-1.3-0.2
	c-0.6,0-1.3,0.2-2.1,0.4c-0.8,0.2-1.7,0.6-2.7,1l-11.9,5.3c-0.3,0.1-0.7,0.3-1,0.4c-0.3,0.1-0.6,0.1-0.8,0.2c-0.2,0-0.4,0-0.6,0
	c-0.2,0-0.2-0.1-0.3-0.2c0-0.1,0-0.3,0.1-0.4c0.1-0.2,0.3-0.3,0.5-0.5c0.2-0.2,0.5-0.4,0.8-0.5c0.3-0.2,0.6-0.3,1-0.5l23-10.1
	L1906.1,226.8z" />
				</g>
				<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>
				<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>
		</g>
		<path fill="#008ABE" d="M1758.1,234.6c1.1,0.2,5.7-29.4,2.5-39c-3.2-9.6-2.8-20.9-21.3-22.8c-5.8-0.6,12.7,15.1,10.8,36.3
	C1748.9,223.5,1758.1,236.5,1758.1,234.6z" />
		<path fill="#008ABE" d="M1913.6,172.5c0,0-9.8,21.3-58.6,0.6c-15-6.4-12.3-8.7-17.1-8.7s-45.7,3.9-71.5-25.2
	c-2-2-34.2-2.8-43.5-6.5c-9.3-3.6,25.2-21.6,26.1-21.6S1906.1,151.5,1913.6,172.5z" />
		<g>
				<path fill="#00AEEF" d="M1859.7,75.8c0,0,76.6-16.9,89,31.1c6.5,25-13.9,56.5-13.9,56.5c-3.7,3.7-25,27.8-64,15.8l-29.2-19
	c0,0-26,0-32.9-2.3c-7-2.3-34.8-16.7-38-20.4c-2-0.9-8.6-1.7-17.5-2.5c2.6-4.6,3.6-12.4,2.6-21.3c-1-8.9,0.8-20.3-9.4-25.8
	c-9,1.5,7-2,14.1-1.4c6,0.9,7-0.9,9.3-1.9s11.6-10.2,43.6-15.8C1845.4,63.3,1859.7,75.8,1859.7,75.8z" />
				<path fill="#2E2E2E" d="M1647.6,90.5c2.5,1.4,9.6,4.1,9.6,4.1l9.5,4.1l29.8,0.4c13-3.2,34.8-8.6,49.9-11.2
	c10.2,5.5,8.4,16.9,9.4,25.8c1,8.8,0,16.7-2.6,21.3c-23.8-2.1-64.1-4.1-75.9-6.7c-3.8-0.4-7.6-0.7-8.3-0.5
	c-1.4,0.4-5.7,0.4-8.1-0.9c-2.3-1.3-11.8-1.8-16.3-2.7c-4.5-0.9-23.1-0.7-25.8-4.3c-2.7-3.6-14-11.6-16.1-14.1s0.4-6.1,1.4-10.7
	c1.1-4.7,6.1-5.2,6.1-5.2s2.1-5.2,4.7-7c2.5-1.8,2.7-1.8,4.3-1.8c1.6,0,3.8,0.4,3.8,0.4s0.9-1.3,6.1-2.3
	c5.2-1.1,13.8,2.9,14.5,3.4C1648.9,84.8,1648.1,86.6,1647.6,90.5z" />
		</g>
		<path fill="#1C1C1C" d="M1603,104c0.2,0.6,1.5-2.1,2.8-3c1.3-0.9,4.8-0.4,5.6-0.2c0.8,0.2,1.1-0.6,1.1-0.6s2.5-4.3,4.1-5.2
	s3.9-0.4,4.6,0c0.7,0.4,2.2-1.1,4.8-1.6c2.2-0.5,4,1.1,4.1-0.3c0.1-1.4,1.4-9.6,1.8-10.7s1.3-3.4-2.6-2.6c-3.9,0.8-6.3,2.4-6.3,2.4
	s-4.1-0.8-5.4-0.4c-1.3,0.4-5.7,5.4-6.7,8.3c-1.7,0.7-4.7,1.8-5.1,2.6c-0.4,0.8-1.1,3.2-1.3,4.9C1604.3,99.3,1602.3,101.6,1603,104
	z" />
		<path fill="#008ABE" d="M1933.3,96.5c-8.8-1.5-20-8.8-43.8-5.8c-18.6,2.9-34.4,11-34.4,11s-40.5-14.1-48.8-16.3
	c-10.9,2-24.3,2.6-21.7,1s24-8.2,28.4-9.3c4.4-1,18.3,11.1,22.4,12.6c4.1,1.5,18.4,0.1,24.5-1.9c6.1-2-4.9-5.2-4.7-7.2
	c0.1-2,4-1.3,10.3-3.8c6.4-2.5,14.5-3.2,35.7-1.4C1922.7,77.3,1954,100.1,1933.3,96.5z" />
		<path fill="#008ABE" d="M1819.8,110.9c-2.4,0,7.2-3.8,5.4-3.8s-8.6,3.5-12.4,4s-20.8-0.7-22.8-0.3s-12.8,4.5-12.5,6.1
	c0.3,1.6,18,3.3,25,2s16.5-3.7,18.3-5.3C1822.6,112.1,1821.3,110.9,1819.8,110.9z" />
		<path fill="#008ABE" d="M1536,198.6c-0.3-1.5-1.1-7.3-4.7-10.1c-3.6-2.8-3.1-15.2,0.7-16.6c3.7-1.5,17.9-13.7,32.3-15.2
	s-4.4,4.6-9,5.9c-4.6,1.3-22.3,16.3-20.2,26.1C1537.1,198.4,1536.5,201.2,1536,198.6z" />
		<path fill="#008ABE" d="M1530.5,182.3c-1,0.5-2.2-0.4-3.9-0.9c-1.8-0.5-7.4,0.7-7.2-0.7s13.3-2.2,14.3-4.5
	C1534.8,173.8,1532.3,181.4,1530.5,182.3z" />
	</g>
	</svg>
</div>
<div class="particles"></div>
<div class="particles"></div>
<div class="particles"></div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
<p>适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源:<a href="http://www.php.cn/" target="_blank">php中文网</a></p>
</div>
</body>
</html>

全部代码:HTML5-SVG超人飞翔动画特效

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值