绘制效果动画可以使用CSS动画来实现。可以根据需要修改或编辑使用的图像。将图像保存为 SVG 文件格式。动画是通过使用线条和曲线绘制简单的艺术来创建的。
这 CSS stroke-dashoffset属性 定义沿 SVG 路径的位置,其中划线将开始。
stroke-dasharray用于在 SVG 形状的笔划中创建破折号。动画在 5 秒内完成一个循环。线性函数指定从开始到结束速度相同的动画。 forwards选项指定元素将保留由最后一个关键帧设置的样式值。 @keyframes规则指定动画代码。
例子:
HTML
输出:现在,正如您在输出中看到的,我们使用线条和曲线创建了一个简单的艺术作品。