<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding:0;
margin: 0;
}
svg{
width: 525px;
height: 300px;
border:1px solid gray;
margin: 100px auto 0;
display: block;padding: 100px 10px;
}
path{
fill:none;
stroke:#000;
stroke-width:3;
stroke-dasharray:3531;
stroke-dashoffset:3531;
animation:ani 10s linear forwards;
/*infinite*/
}
@keyframes ani{
to{
stroke-dashoffset:0;
}
}
</style>
</head>
<body>
<svg width="500" height="500" style="border:1px solid #333">
<image xlink:href="img/pen.ico" x="0" y="-128">
<animateMotion path="M0.0980274 69.537c0,0 285.173,-50.6009 479.178,-39.7614 0,0 52.1877,4.70184 0.480716,8.91567 -51.707,4.21383 -308.014,24.8289 -35
本文展示了一种使用SVG（可缩放矢量图形）技术创作一笔签名字体艺术的方法，通过细腻的路径描绘和动画效果，实现独特的视觉体验。
最低0.47元/天 解锁文章
3914
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
