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