[分享]css3按多边形路径动画

在CSS3中，多边形路径动画是一项非常有趣的功能。通过CSS3，可以将多边形路径变成动画形式，达到更好的效果。下面我们来看一下如何在CSS3中实现多边形路径动画。 .path { strokedash...

在CSS3中，多边形路径动画是一项非常有趣的功能。通过CSS3，可以将多边形路径变成动画形式，达到更好的效果。下面我们来看一下如何在CSS3中实现多边形路径动画。

<style>
  .path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawPath 5s linear forwards;
  }
  @keyframes drawPath {
    to {
      stroke-dashoffset: 0;
    }
  }
</style>

<svg width="200" height="200">
  <path class="path" d="M 50 50 L 150 50 L 150 150 L 100 100 L 50 150 Z"/>
</svg> 

上面的代码中，我们首先定义了一个path元素的类名为"path"。接着，给该元素添加了stroke-dasharray和stroke-dashoffset两个属性，这两个属性都是用来定义线段的长度和距离的。其中，stroke-dasharray表示了一次循环的线段的长度，而stroke-dashoffset表示了第一条线段距离起点的长度。这两个属性设置好之后，我们给该元素添加了一个动画，即"drawPath"。

在动画的关键帧中，我们将stroke-dashoffset的值从1000（表示初始状态）变成0（表示终止状态），这样就形成了一条依次绘制出来的路径。最后，我们将path元素添加到一个SVG元素中，以实现路径的展示效果。