用SVG制作沿路动画五角星

以上是index.html部分

接下来是CSS部分

.star-path{
   fill:none;   不想让图形被填充的话
   stroke-width:10;  stroke- width属性定义了一条线，文本或元素轮廓厚度
   stroke:#d3dce6; Stroke属性定义一条线，文本或元素轮廓颜色：
   stroke-linejoin:round; strokelinejoin属性定义折角时的形状
   stroke-linecap:round; strokelinecap属性定义不同类型的开放路径的终结形状
}
.star-fill{
   fill:none;
   stroke-width:10;
   stroke:#ff7700;
   stroke-linejoin:round;
   stroke-linecap:round;
   stroke-dasharray:782; strokedasharray属性用于创建虚线：
   stroke-dashoffset:0; 定义虚线描边的偏移量（在路径开始的前面，看不到）
   animation:starFill 2s ease-out infinite;设置动画名字 以及时间 还有说明了动画是无穷的，一直来回播放
}
@keyframes starFill{    用keyframes来定义动画规则，同时也是帧选择器
   0%{
      stroke-dashoffset:782;一开始定义的是虚线间的距离是782 也就是都是空白，然后开始偏移，慢慢地将动画填充完，直到充满为止。
    }
    100%{
       stroke-dashoffset:0;等到最后的时候，填充图形完毕后，即停止偏移。
    }   
}