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

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

代码语言：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 .........完整代码请登录后点击上方下载按钮下载查看