用SVG制作沿路动画五角星

最新推荐文章于 2024-04-26 13:29:10 发布

LEE1996JUN

最新推荐文章于 2024-04-26 13:29:10 发布

阅读量1.1k

点赞数

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

版权

本文介绍如何使用SVG（可缩放矢量图形）技术制作一个沿着路径移动的动画五角星效果。通过HTML和CSS的结合，详细讲解了实现这一视觉效果的步骤和关键代码。

摘要由CSDN通过智能技术生成

<!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的标签来实现描绘的动画。*/

</