css3实现svg直线动画

CSS3是一种可用于创建丰富和深刻的 Web 动画的技术。其中一种常见的应用是使用 CSS3 实现 SVG 直线动画。这种动画效果很吸引人，而实现起来也非常简单。

<!DOCTYPE html>
<html>
<style>
.line{
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: dash 2s linear forwards;
}

@keyframes dash{
    to{
        stroke-dashoffset:0;
    }
}
</style>
<body>
<svg width="500" height="500">
  <line x1="50" y1="100" x2="450" y2="100" stroke="black" stroke-width="5" class="line" />
</svg>
</body>
</html>

css3实现svg直线动画

上面的代码可以在一个短的 CSS3 动画中创建令人惊叹的直线动画。我们通过创建一个<svg>元素，并在其中绘制一条线来实现这个效果。CSS样式产生了一个具有“排列”的效果，而线条沿着"路径"动画显示。这是通过使用 stroke-dasharray 属性和 stroke-dashoffset 属性实现的 - 它们使用 "关键帧" 动画。

stroke-dasharray 属性指定线条中每个间隙的宽度和间距。我们在这里将其设置为1000，这是一个足够大的数字，以便我们可以根据需要将其减小。 stroke-dashoffset 属性可让我们将绘制的线条推入其初始位置。

使用@keyframes 规则，我们可以创建一个“从”的状态，并将 stroke-dashoffset 属性从 1000（推动线条到其初始位置）到 0（使线条处于最终位置）进行更改。我们将这个动画命名为 dash。

最后，我们将动画应用到我们的线条中，这样就有了一个完整的 SVG 直线动画。

css3实现svg直线动画

相关推荐