SVG地铁路径动画

下载代码

html

css

分享到微信朋友圈

html

<section id="wrap">
<h1>New York City Subway</h1>

</g>
  
  <g class="navy">
    <path d="M3 2654.4829 360.150802 2297.333 271.817802 2209"></path>
    <path d="M235 2422.226 235 2408.083 345.816 2297.265 264.553 2216"></path>
  </g>
  
  <g class="gray">
    <path d="M174 1377.316 637.441 1377.316 853.775 1377.316 924.091 1307 1037.424 1420.332 1100.502 1357.255 1146.367 1357.255 1412.109 1357.255 1412.109 1499.316 1625.439 1712.645 1625.439 1793.484"></path>
    <path d="M258,1190 L506.12698,1190"></path>
  </g>
  
  <g class="orange">
    <path d="M587.406 1516.739 371 1516.739 371 1002.073 747.656 1002.073 812.753 1002.073 812.753 1002.073 932.753 882.071 946.898 882.071 1305.467 882.071 1332.798 909.401 1770.131 909.401 1801.324 940.597 1944.922 797"></path>
    <path d="M1397.973 2452.486 1421.609 2428.852 1421.609 2409.537 1203.218 2191.146 1172.607 2138.125 646.027 1611.546 599.607 1611.546 599.607 1565.125 599.607 1526.668 536.607 1526.668 360.951 1526.668 360.951 1106.666 179 1106.666 169 1106.666 149 1106.666 149.36 682.699 139.36 672.699 139 547.648 180.65 505.996 251.461 435.188 508.607 435.188 508.607 97 549.607 97"></path>
    <path d="M1283.513 2566.595 1354.513 2495.595 1053.442 2194.525 1053.442 2178.525 999.588 2124.666 976.252 2124.666 976.252 2066 958 2066"></path>
    <path d="M577 1517.002 609.25 1517.002 609.25 1550.334 855.75 1550.334 865.75 1550.334 1189.25 1550.334 1362.25 1377.334 1362.25 1308.334 1406.25 1264.334 1406.25 1235"></path>
    <path d="M752,1906.334 L752,1865"  ></path>
    <path d="M169.04 546.668 169 532.239 210.65 490.589 255.386 445.854 518.607 445.854 518.607 131"></path>
    <path d="M178.96 1106.664 179.32 671.024 169.32 661.024 169 547"></path>
    <path d="M900,1829.672 L900,1878.338"  ></path>
    <path d="M823.802 1789.927 865.97 1789.927 900.882 1825.646 900.882 2235 960 2235 1116.366 2505.834 1209.494 2505.834 1262.615 2558.955 1280.619 2540.948"></path>
    <path d="M371 1106.666 721 1106.666 750.518 1106.666 886.486 970.696 886.486 872 1301.324 872 1309.608 872 1337.307 899.698 1620.156 899.698"></path>
    <path d="M968.5,2066 L775,2066"  ></path>
    <path d="M784.186 2066.328 752 2066.328 752 1905"></path>
    <path d="M752.314 1865.666 752.314 1670.564 681.045 1608.182 642.487 1569.625 642.487 1553.66 642.487 1507 621 1507 587 1507 577 1517"></path>
  </g>
  
  <g class="purple">
    <path d="M837.327 1080.62 810.693 1054 759.771 1054 719.993 1054 697.659 1054 697.659 1096.954 765.263 1164.558 729.771 1200.05 48 1200.051 48 1273.272"></path>
    <path d="M1523.666 568 1010.332 1081.332 837 1081.332"></path>
    <path d="M1531.271 575 1014.272 1091.261 847.533 1091.261 834 1077.727"></path>
  </g>
  
  <g class="red">
      <path d="M362 600.5 382.416 580.084 402.416 580.084 444.666 537.834 609.166 537.834 778.666 368.334 778.666 261 700.211 125.111 700.211 3"></path>
      <path d="M286.758 554 362.194 554 362.194 735.342 74 735.342 74.091 961.903 251.29 1139.546 251.2 1639.409 282.624 1693.106 563.286 1693.106 563.286 1821.508 651.435 1821.508 683.286 1876.678 966.648 1876.678 1125.265 2035.295 1125.265 2035.295 1294.025 1937.861 1317.374 1914.512"></path>
      <path d="M1512.344,2089.938 L1337.406,1915 L1317.26,1915 L1313,1919.26"  ></path>
      <path d="M110.125 102 110.125 210.749 64 256.874 64 294.417 54 304.417 54 725.412 64 735.412 64 966.084 242.202 1144.281 242.202 1614.959 242.202 1642.752 372.894 1869.119 455.339 1869.119"></path>
      <path d="M1689.16 1594 1495.502 1787.665 1443.178 1787.665 1326.427 1904.416 1311 1919.841"></path>
  </g>
  
  <g class="brown">
    <path d="M1925.739 947 1849.41 1023.33 1803.58 1023.33 1571.172 1255.738 1649.957 1335.488 1424.891 1560.555 869.64 1560.555 859.64 1560.555 716.168 1560.555 626.334 1560.555 556 1560.555 545 1560.555 545 1699.555 529 1715.555 529 1826.055"></path>
    <path d="M881,907 L881,965.66998"></path>
    <path d="M1933.479 954 1854.22 1033.257 1808.391 1033.257 1585.916 1255.732 1664.701 1335.482 1429.701 1570.482 856.166 1570.482 846.166 1560.482 836 1560.482"></path>
  </g>
 </g>

</svg>

</div>
</section>

<div id="toggle" onclick="toggle3D(this)"> Toggle 3D</div>

css

* {
  box-sizing: border-box;
}

html, body, #map, #wrap {
  height: 100%;
  width: 100%;
  margin: 0;
  background: #111;
  font-family: -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
}

h1 {
  color: white;
  width: 100%;
  text-transform: uppercase;
  font-weight: 200;
  letter-spacing: 0.8em;
  text-align: center;
  font-size: 2em;
  margin: 0;
}

#wrap, #map {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  overflow: hidden;
  padding: 1em;
}

svg {
  position: absolute;
}

.three-D {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: translate(0%, 0%)
    rotateX(-60deg)
    rotateY(0deg)
    rotateZ(-10deg)
    scale(2);
          transform: translate(0%, 0%)
    rotateX(-60deg)
    rotateY(0deg)
    rotateZ(-10deg)
    scale(2);
}

path, polyline {
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1;
}

#front path, #front polyline {
  stroke-width: 15;
}

.green path {
  stroke: #4caf50;
}
.lime path {
  stroke: #76ff03;
}
.brown path {
  stroke: #795548;
}
.orange path {
  stroke: #ff5722;
}
.blue path {
  stroke: #2196f3;
}
.navy path {
  stroke: #3f51b5;
}
.yellow path {
  stroke: #ffeb3b;
}
.purple path {
  stroke: #651fff;
}
.red path {
  stroke: #f44336;
}
.gray path {
  stroke: #607d8b;
}

#toggle {
  position: fixed;
  right: 5%;
  bottom: 5%;
  color: #777;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid #111;
}
#toggle:hover {
  border: 1px solid #fff;
  color: #fff;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

JavaScript

// Duplicate the transit lines
const container = document.getElementById('map')
const svgBack = document.getElementById('back');
const svgFront = svgBack.cloneNode(true);
svgFront.setAttribute('id', 'front');
container.appendChild(svgFront);

// Obtain all transit line paths + polylines
let paths = document.querySelectorAll('#front path, #front polyline');
paths = Array.prototype.slice.call(paths);
let style = ``;

const CAR_SIZE = 10;
paths.forEach((path,i) => {
  path.setAttribute('id', 'path-' + i);
  const length = path.getTotalLength();

const speed = length/100;

style += `
    #path-${i} {
      stroke-dasharray: ${CAR_SIZE}, ${length/2};
      stroke-dashoffset: ${length};
      animation: dash-${i} ${speed}s linear alternate infinite;  
    }

@keyframes dash-${i} {
      from {
        stroke-dashoffset: ${length};
      }
      to {
        stroke-dashoffset: 0;
      }
    }`
});

const sheet = document.createElement('style');
sheet.innerHTML = style;
document.body.appendChild(sheet);

function toggle3D(e) {
  svgFront.classList.toggle('three-D');
  svgBack.classList.toggle('three-D');
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg