html5-svg-shanche-animation.zip_htmlSVG_过山车资源-CSDN文库

共4个文件

css：2个

html：1个

js：1个

版权申诉

14 浏览量 2022-09-14 22:09:11 上传评论收藏 76KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

html5-svg-shanche-animation.zip （4个子文件）

html5-svg-shanche-animation

css

style.css 312B

normalize.css 2KB

index.html 225KB

index.js 10KB

<!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"> <div style="text-align:center;clear:both;position:absolute;top:10px;left:280px"> <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script> <script src="/follow.js" type="text/javascript"></script> </div> <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 "/>

评论收藏

内容反馈

版权申诉