svg实现地铁轨道交通运行图动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：svg实现地铁轨道交通运行图动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 2rem;
  background: #eeeeee;
}

#metro {
  stroke-dasharray: 40 60;
  animation: metro 17s linear infinite;
}

#jokeri {
  stroke-dasharray: 20 60;
  animation: jokeri 7s linear infinite;
}

#juna {
  stroke-dasharray: 40 100;
  animation: juna 18s linear infinite;
}

@keyframes juna {
  to {
    stroke-dashoffset: 1770;
  }
}
@keyframes metro {
  to {
    stroke-dashoffset: 1485;
  }
}
@keyframes jokeri {
  to {
    stroke-dashoffset: 709;
  }
}
</style>



</head>

<body >
  <svg width="1007" height="619" viewBox="0 0 1007 619" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g id="Frame 1">

    <path id="jokeriraide" d="M390 484L409.889 457.804C410.286 457.282 410.5 456.645 410.5 455.99V442.096C410.5 441.098 410.004 440.166 409.177 439.608L365.823 410.392C364.996 409.834 364.5 408.902 364.5 407.904V393.11C364.5 392.394 364.756 391.701 365.222 391.157L372.778 382.343C373.244 381.799 373.5 381.106 373.5 380.39V356C373.5 354.343 372.157 353 370.5 353H367.5C365.843 353 364.5 351.657 364.5 350V323.5C364.5 321.843 365.843 320.5 367.5 320.5H372.735C373.237 320.5 373.731 320.626 374.172 320.866L389.328 329.134C389.769 329.374 390.263 329.5 390.765 329.5H419.859C420.594 329.5 421.303 329.77 421.852 330.258L433.648 340.742C434.197 341.23 434.906 341.5 435.641 341.5H496.779C497.562 341.5 498.314 341.194 498.874 340.648L558.126 282.852C558.686 282.306 559.438 282 560.221 282H640.5C642.157 282 643.5 280.657 643.5 279V274.5C643.5 272.843 644.843 271.5 646.5 271.5H685.383C686.104 271.5 686.8 271.759 687.345 272.23L767.022 341.087C767.337 341.359 767.706 341.563 768.104 341.685L805 353" stroke="#ccc" stroke-width="7" stroke-linecap="round" />
    <path id="junaraide" d="M3 408.5L76.1213 335.379C76.6839 334.816 77.447 334.5 78.2426 334.5H173.74C174.546 334.5 175.318 334.176 175.882 333.6L199.118 309.9C199.682 309.324 200.454 309 201.26 309H492C493.657 309 495 307.657 495 306V265.891C495 265.009 494.611 264.171 493.938 263.601L444.062 221.399C443.389 220.829 443 219.991 443 219.109V64.2777C443 63.4614 443.333 62.6803 443.921 62.1147L480.629 26.837C481.188 26.2999 481.933 26 482.708 26H553.142C554.005 26 554.827 26.3717 555.396 27.0202L586.104 61.9798C586.673 62.6283 587.495 63 588.358 63H603.687C604.524 63 605.323 62.6504 605.891 62.0356L658.609 4.96439C659.177 4.34961 659.976 4 660.813 4H765.3C766.07 4 766.811 4.29632 767.369 4.82759L776.069 13.1133C776.664 13.6795 777 14.4647 777 15.2857V128.764C777 129.556 776.687 130.315 776.129 130.877L564.371 344.123C563.813 344.685 563.5 345.444 563.5 346.236V379V445.567C563.5 446.473 563.91 447.331 564.615 447.901L575.385 456.599C576.09 457.169 576.5 458.027 576.5 458.933V495.5" stroke="#ccc" stroke-width="7" stroke-linecap="round" />
    <path id="metroraide" d="M25.5 534L59.127 566.652C59.6868 567.196 60.4365 567.5 61.2169 567.5H201.222C202.038 567.5 202.82 567.167 203.385 566.578L298.115 467.922C298.68 467.333 299.462 467 300.278 467H347.901C348.611 467 349.297 466.748 349.839 466.29L354.438 462.399C355.111 461.829 355.5 460.991 355.5 460.109V450.458C355.5 449.538 355.923 448.668 356.647 448.099L368.684 438.641C369.213 438.226 369.865 438 370.538 438H386.717C388.066 438 389.249 438.9 389.609 440.2L394.979 459.616C395.296 460.761 394.907 461.985 393.987 462.738L385.925 469.334C385.051 470.049 384.653 471.195 384.895 472.299L388.826 490.206C388.94 490.726 389.19 491.206 389.551 491.597L406.109 509.535C406.677 510.15 407.476 510.5 408.313 510.5H534.408C535.114 510.5 535.796 510.252 536.336 509.799L550.164 498.201C550.704 497.748 551.386 497.5 552.092 497.5H574.803C575.572 497.5 576.311 497.205 576.868 496.676L594.565 479.887C595.162 479.321 595.5 478.534 595.5 477.711V457.102C595.5 456.39 595.753 455.702 596.213 455.16L617.101 430.558C617.671 429.887 618.508 429.5 619.388 429.5H694.764C695.556 429.5 696.315 429.187 696.877 428.63L758.623 367.37C759.185 366.813 759.944 366.5 760.736 366.5H793.62C794.496 366.5 795.328 366.117 795.898 365.452L807 352.5M807 352.5V285.808C807 284.974 807.347 284.177 807.959 28.........完整代码请登录后点击上方下载按钮下载查看