1、虚线：

  1. .line1{
  2.     stroke: black;
  3.     stroke-width: 10px;
  4.     stroke-dasharray: 10px 10px; /* 虚线 */
  5.     stroke-dashoffset:10px ;/* 虚线偏移:向左偏移 */
  6.     animation: move 2s linear infinite alternate-reverse;
  8. }

2、伸缩条动画：

  1. <style>
  2.     .line1{
  3.         stroke: black;
  4.         stroke-width: 10px;
  5.         stroke-dasharray: 200px;
  6.         stroke-dashoffset: 200px;
  7.         animation: move 2s linear infinite alternate-reverse;
  9.     }
  10.     @keyframes move {
  11.         0%{
  12.             stroke-dashoffset: 200px;
  13.         }
  14.         100%{
  15.             stroke-dashoffset: 0px;
  16.         }
  17.     }
  18. </style>
  19. </head>
  20. <body>
  21. <svg width="500px" height="300px" style="border: 1px solid">
  22.    <line x1="100" y1="100" x2="300" y2="100" class="line1"></line>
  23. </svg>
  24. </body>