实现效果的关键是下面两个 CSS 属性
-
stroke-dasharray- 控制虚线的长短和间隔 -
stroke-dashoffset- 控制第一段虚线离起始位置的距离
Sample
<!-- 示例 html 片段 -->
<polygon points="420 320, 230 320, 200 300, 200 100,390 100,420 120" class="polygon polygon_animate"></polygon>
/* 定义CSS */
@keyframes polygon {
0%{
stroke-dashoffset: 0;
}
100%{
stroke-dashoffset: 100;
}
}
.polygon {
fill: transparent;
stroke: #3FA9F5;
stroke-width: 2;
stroke-dasharray: 10, 5;
stroke-dashoffset: 0;
}
.polygon.polygon_animate {
animation: polygon 2s linear infinite;
}
