<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5/SVG实现过山车动画DEMO演示</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
<div class="svg-container">
<div class="svg-container__content">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2702 1819" enable-background="new 0 0 2702 1819" xml:space="preserve">
<defs>
<g id="cabin1">
<polygon fill="#413A5D" points="2.959,32.001 5.229,39.273 68.499,39.24 74.809,31.965 "/>
<circle fill="#413A5D" cx="9.278" cy="40.577" r="4.941"/>
<circle fill="#413A5D" cx="64.727" cy="40.55" r="4.941"/>
<polygon fill="#EC6739" points="76.183,34.254 73.249,35.604 2.302,35.639 0.011,33.42 0,9.701 59.085,9.673 68.144,14.197
76.175,18.92 "/>
<rect x="2.009" y="0.214" fill="#EC6739" width="4.528" height="22.438"/>
<rect x="32.36" y="-0.067" fill="#EC6739" width="4.527" height="22.438"/>
<rect x="0.027" y="21.498" transform="matrix(-1 5.127509e-04 -5.127509e-04 -1 76.2347 47.1426)" fill="#F7FBFB" width="76.168" height="4.166"/>
</g>
<g id="cabin2">
<polygon fill="#413A5D" points="1.401,31.965 7.71,39.24 70.98,39.273 73.251,32.001 "/>
<circle fill="#413A5D" cx="66.931" cy="40.577" r="4.941"/>
<circle fill="#413A5D" cx="11.483" cy="40.55" r="4.941"/>
<polygon fill="#EC6739" points="0.034,18.92 8.066,14.197 17.124,9.673 76.21,9.701 76.199,33.42 73.907,35.639 2.96,35.604
0.026,34.254 "/>
<rect x="69.673" y="0.214" fill="#EC6739" width="4.529" height="22.438"/>
<rect x="39.321" y="-0.067" fill="#EC6739" width="4.529" height="22.438"/>
<rect x="0.014" y="21.498" fill="#F7FBFB" width="76.168" height="4.166"/>
</g>
</defs>
<pattern x="0.5" y="1819" width="400.552" height="313.691" patternUnits="userSpaceOnUse" id="New_Pattern_10" viewBox="0 -321.326 400.552 313.691" overflow="visible">
<g>
<polygon fill="none" points="0,-7.635 400.552,-7.635 400.552,-321.326 0,-321.326 "/>
<g>
<polygon fill="none" points="0,-7.635 400.552,-7.635 400.552,-321.327 0,-321.327 "/>
<g>
<polygon fill="#FFFFFF" points="77.17,-268.03 61.837,-268.03 61.837,-266.03 77.17,-266.03 "/>
<polygon fill="#FFFFFF" points="74.218,-296.491 63.375,-285.648 64.79,-284.234 75.632,-295.077 "/>
<polygon fill="#FFFFFF" points="14.561,-271.488 23.93,-259.35 25.513,-260.571 16.144,-272.711 "/>
<polygon fill="#FFFFFF" points="114.608,-256.672 128.635,-250.477 129.442,-252.305 115.416,-258.502 "/>
<polygon fill="#FFFFFF" points="165.341,-295.366 175.065,-307.223 173.52,-308.491 163.795,-296.635 "/>
<polyline fill="#FFFFFF" points="181.057,-263.143 170.528,-274.29 169.074,-272.918 179.603,-261.77 "/>
<polygon fill="#FFFFFF" points="398.167,-246.57 389.178,-258.992 387.558,-257.82 396.547,-245.398 "/>
<polygon fill="#FFFFFF" points="131.234,-313.691 138.041,-327.433 136.25,-328.32 129.442,-314.58 "/>
<polygon fill="#FFFFFF" points="350.486,-304.387 348.308,-289.211 350.288,-288.926 352.466,-304.104 "/>
<polygon fill="#FFFFFF" points="321.894,-305.508 331.087,-293.235 332.688,-294.434 323.495,-306.706 "/>
<polygon fill="#FFFFFF" points="338.17,-242.904 351.517,-250.454 350.532,-252.194 337.186,-244.645 "/>
<polygon fill="#FFFFFF" points="276.525,-260.899 289.872,-268.45 288.887,-270.19 275.541,-262.641 "/>
<polygon fill="#FFFFFF" points="389.637,-285.908 382.472,-299.465 380.704,-298.53 387.869,-284.973 "/>
<polygon fill="#FFFFFF" points="228.089,-245.799 215.454,-254.488 214.32,-252.842 226.955,-244.151 "/>
<polygon fill="#FFFFFF" points="225.279,-288.723 240.559,-290.01 240.39,-292.002 225.112,-290.717 "/>
</g>
<g>
<polygon fill="#FFFFFF" points="77.17,-111.185 61.837,-111.185 61.837,-109.185 77.17,-109.185 "/>
<polygon fill="#FFFFFF" points="74.218,-139.646 63.375,-128.803 64.79,-127.389 75.632,-138.231 "/>
<polygon fill="#FFFFFF" points="14.561,-114.643 23.93,-102.504 25.513,-103.726 16.144,-115.864 "/>
<polygon fill="#FFFFFF" points="23.619,-178.219 32.988,-166.08 34.571,-167.301 25.202,-179.44 "/>
<polygon fill="#FFFFFF" points="114.608,-99.826 128.635,-93.631 129.442,-95.461 115.416,-101.655 "/>
<polygon fill="#FFFFFF" points="154.649,-200.308 158.094,-185.366 160.042,-185.815 156.599,-200.758 "/>
<polygon fill="#FFFFFF" points="89.916,-180.476 102.916,-172.346 103.976,-174.041 90.976,-182.172 "/>
<polygon fill="#FFFFFF" points="165.341,-138.521 175.065,-150.377 173.52,-151.646 163.795,-139.789 "/>
<polygon fill="#FFFFFF" points="69.073,-193.893 54.154,-197.439 53.691,-195.495 68.609,-191.946 "/>
<polyline fill="#FFFFFF" points="181.057,-106.297 170.528,-117.444 169.074,-116.071 179.603,-104.924 "/>
<polygon fill="#FFFFFF" points="140.288,-222.395 155.321,-225.41 154.928,-227.37 139.894,-224.355 "/>
<polygon fill="#FFFFFF" points="202.355,-231.315 190.782,-241.374 189.469,-239.865 201.043,-229.805 "/>
<polygon fill="#FFFFFF" points="205.974,-167.199 194.402,-177.258 193.089,-175.749 204.663,-165.69 "/>
<polygon fill="#FFFFFF" points="398.167,-89.725 389.178,-102.146 387.558,-100.975 396.547,-88.553 "/>
<polygon fill="#FFFFFF" points="1.792,-224.02 8.599,-237.76 6.808,-238.648 0,-224.908 "/>
<polygon fill="#FFFFFF" points="66.302,-228.312 69.747,-213.37 71.695,-213.819 68.251,-228.76 "/>
<polygon fill="#FFFFFF" points="131.234,-156.846 138.041,-170.588 136.25,-171.475 129.442,-157.734 "/>
<polygon fill="#FFFFFF" points="350.486,-147.543 348.308,-132.364 350.288,-132.08 352.466,-147.258 "/>
<polygon fill="#FFFFFF" points="321.894,-148.661 331.087,-136.389 332.688,-137.588 323.495,-149.86 "/>
<polygon fill="#FFFFFF" points="338.17,-86.059 351.517,-93.608 350.532,-95.348 337.186,-87.799 "/>
<polygon fill="#FFFFFF" points="276.525,-104.053 289.872,-111.604 288.887,-113.344 275.541,-105.795 "/>
<polygon fill="#FFFFFF" points="354.696,-192.252 362.82,-205.258 361.125,-206.315 353,-193.312 "/>
<polygon fill="#FFFFFF" points="253.405,-166.479 240.771,-175.168 239.637,-173.521 252.271,-164.831 "/>
<polygon fill="#FFFFFF" points="213.649,-206.315 228.928,-207.603 228.761,-209.594 213.481,-208.309 "/>
<polygon fill="#FFFFFF" points="283.707,-169.999 293.601,-181.715 292.074,-183.004 282.18,-171.289 "/>
<polygon fill="#FFFFFF" points="341.865,-212.415 331.509,-223.723 330.034,-222.374 340.39,-211.064 "/>
<polygon fill="#FFFFFF" points="332.258,-174.59 321.903,-185.899 320.428,-184.549 330.783,-173.239 "/>
<polygon fill="#FFFFFF" points="389.637,-129.062 382.472,-142.618 380.704,-141.685 387.869,-128.129 "/>
<polygon fill="#FFFFFF" points="249.367,-225.814 248.518,-241.124 246.521,-241.012 247.371,-225.703 "/>
<polygon fill="#FFFFFF" points="228.089,-88.953 215.454,-97.643 214.32,-95.996 226.955,-87.305 "/>
<polygon fill="#FFFFFF" points="225.279,-131.877 240.559,-133.164 240.39,-135.156 225.112,-133.871 "/>
<polygon fill="#FFFFFF" points="312.966,-207.543 300.331,-216.232 299.198,-214.586 311.832,-205.896 "/>
HTML5基于SVG实现的过山车动画特效源码.zip （10个子文件） 
132686862235981270 css 
style.css 312B normalize.css 2KB images 
pattern3.png 1KB pattern4.png 1KB pattern5.png 1KB pattern2.png 1KB
index.html 228KB js jquery.js 95KB index.js 10KB tween.min_1.js 7KB资源评论
