纯css给一条虚线增加 飞线效果，要求无限向上滚动 的demo

要在纯CSS中实现飞线效果的虚线，并配合无限向上滚动，你可以使用CSS动画和`::before`伪元素结合来创建这种动态感觉。下面是一个简单的示例：

HTML:

<div class="scrolling-line">
  <span></span>
</div>

CSS:

.scrolling-line {
  overflow-y: scroll;
  height: 200px; /* 你可以调整高度以适应你的需求 */
}

.scrolling-line span {
  position: relative;
  display: inline-block;
  width: 4px; /* 虚线宽度 */
  background-image: linear-gradient(to right, transparent 50%, currentColor 50%);
  animation: flyline infinite;
}

.scrolling-line::before {
  content: "";
  position: absolute;
  top: -5px; /* 控制起点位置 */
  left: calc(50% - 2px); /* 中心对齐 */
  width: 4px;
  height: 2px; /* 飞线长度 */
  background-color: currentColor;
  transform-origin: bottom;
  animation: flyline infinite;
  animation-100%);
  }
  100% {
    transform: translateY(0);
  }
}

这个示例中，`.scrolling-line`容器设置了`overflow-y: scroll`使其可以滚动，而`.scrolling-line::before`伪元素会在每次滚动时从底部升起形成飞线效果。