SVG 实现复杂线条光效动画

【动画进阶】巧用 CSS/SVG 实现复杂线条光效动画 - Coco的文章 - 知乎 zhuanlan.zhihu.com/p/696097516

html

  <div id="box">

    <svg height="100%" width="100%">

      <!-- 画一条实线 -->

      <polyline

        points="240 10 140 10 140 90 0 90"

        stroke="#ddd"

        fill="transparent"

        stroke-width="2"

      />

         <!-- 画一条虚线 -->

      <polyline

        class="g-dashed-line"

        points="240 10 140 10 140 90 0 90"

        fill="transparent"

        stroke-width="2"

      />

    </svg>

  </div>

</template>


<style scoped>

#box {

  width: 500px;

  height: 500px;

  margin-top: 30px;

  box-shadow: 0 2px 12px 0 #00000060;

  display: flex;

  justify-content: space-around;

  flex-direction: column;

  align-items: center;

}

.g-dashed-line {

  stroke: rgb(241, 7, 7);

  /* stroke-dasharray: 20, 20; *虚线样式 两个数值为虚线长度和虚线间宽度 */

  stroke-dasharray: 40, 20;

  stroke-dashoffset: 0; /**虚线第一条线的初始位置 */

  animation: move 0.4s infinite linear; /**时间越短走的越快 */

  filter: drop-shadow();

}

@keyframes move {

  0% {

    stroke-dashoffset: 0; /**对应上面初始值从0的位置开始画线。画到60以后重新画 */

  }

  100% {

    stroke-dashoffset: 60; /**只要保证超过虚线+空隙的的长度既可以40+20 */

  }

}

</style>