如何用JavaScript和CSS制作一个浪漫蝴蝶飞舞的动画效果？

本文共计1737个文字，预计阅读时间需要7分钟。

目录+演示+技术栈+源码+对部分蝴蝶的设置+飞行动画设置+对蝴蝶形体的设置+演示+技术栈+关于SVG标签在SVG中关于图形的复用，是通过标签defs来解决的。+示例：在图形中添加红色圆形+-

目录

• 演示
• 技术栈
• 源码
• 对部分蝴蝶的设定
• 飞动的设置
• 对蝴蝶形体的设置

演示

技术栈

关于svg标签在svg中关于图形的复用，是通过标签defs来解决的。 举个例子：在图形中红色圆圈 ● 还有黄色圆圈 ● 都是复用的元素。结构都是一样的，只是颜色和位置的差别。

关于figure： <figure标签规定独立的流内容（图像、图表、照片、代码等等）。

<figure元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响。

关于perspective-origin： perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。

定义时的perspective -Origin属性，它是一个元素的子元素，透视图，而不是元素本身。

perspective-origin: x-axis y-axis;

x-axis
定义该视图在 x 轴上的位置。默认值：50%。