用SVG制作沿路动画五角星

最新推荐文章于 2022-09-11 15:44:22 发布

VIP文章 LEE1996JUN

最新推荐文章于 2022-09-11 15:44:22 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/lee1996jun/article/details/79623814

版权

<!DOCTYPE html>
<head>
<title>无标题文档</title>
<link href="images/Untitled-2.css" type="text/css"  rel="stylesheet">
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewbox="-500 -500 2500 2500">/*这几话表明这个画布是500*500的大小，https://segmentfault.com/a/1190000009226427

http://www.zhangxinxu.com/wordpress/2014/08/svg-viewport-viewbox-preserveaspectratio/

这两篇文章可以帮你更好的理解viewbox的概念*/

   <polygon points="-12 -69,-58 85,64 -14,-81 -14,41 85" class="star-path"></polygon>
   <polygon points="-12 -69,-58 85,64 -14,-81 -14,41 85" class="star-fill"></polygon>

/*在以上的代码中，polygon 标签是svg多边形标签，points 属性定义多边形每个角的 x 和 y 坐标。通过class为star-path的标签来实现我们图中的灰色轨迹，通过class为star-fill的标签来实现描绘的动画。*/

</

最低0.47元/天解锁文章

LEE1996JUN

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用SVG制作沿路动画五角星

&lt;!DOCTYPE html&gt;&lt;head&gt;&lt;title&gt;无标题文档&lt;/title&gt;&lt;link href="images/Untitled-2.css" type="text/css" rel="stylesheet"&gt;&lt;/head&gt;&lt;body&gt;
复制链接

扫一扫