在前端开发中，要使用CSS3和SVG来创建一个沿固定路径飞行的纸飞机效果，我们可以通过几个步骤来实现。请注意，这个例子将使用SVG动画（特别是<animateMotion>元素）来沿预定路径移动纸飞机。
步骤 1: 创建SVG元素和路径
首先，在HTML文件中添加一个SVG元素，并定义一个路径，纸飞机将沿着这个路径飞行。
<svg width="800" height="600">
<defs>
<path id="flightPath" d="M50,50 C100,100 200,200 300,150 S400,200 500,100 L600,50" />
</defs>
<!-- 纸飞机图形和其他元素将放在这里 -->
</svg>
这个路径从坐标(50,50)开始，经过一系列的曲线和直线，最后到达(600,50)。你可以根据需要调整这个路径。
步骤 2: 创建纸飞机图形
接下来，在SVG元素中添加一个表示纸飞机的图形。为了简化，我们可以使用一个多边形来代表纸飞机。
<polygon points="75,40 100,75 100,25 125,50 75,55" fill="blue" />
你可以根据需要自定义纸飞机的形状和颜色。
步骤 3: 添加动画
现在，我们将使用<animateMotion>元素来创建动画效果，使纸飞机沿着预定义的路径飞行。
<svg width="800" height="600">
<defs>
<path id="flightPath" d="M50,50 C100,100 200,200 300,150 S400,200 500,100 L600,50" />
</defs>
<polygon id="paperAirplane" points="75,40 100,75 100,25 125,50 75,55" fill="blue">
<animateMotion
path="M50,50 C100,100 200,200 300,150 S400,200 500,100 L600,50"
dur="10s"
repeatCount="indefinite" />
</polygon>
</svg>
在上面的代码中，<animateMotion>元素使纸飞机沿着flightPath定义的路径移动。dur属性指定了动画的持续时间，而repeatCount属性设置为indefinite，使动画无限循环。
完整示例
将上述步骤结合起来，你可以得到以下完整的HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flying Paper Airplane</title>
</head>
<body>
<svg width="800" height="600">
<defs>
<path id="flightPath" d="M50,50 C100,100 200,200 300,150 S400,200 500,100 L600,50" />
</defs>
<polygon id="paperAirplane" points="75,40 100,75 100,25 125,50 75,55" fill="blue">
<animateMotion
path="M50,50 C100,100 200,200 300,150 S400,200 500,100 L600,50"
dur="10s"
repeatCount="indefinite" />
</polygon>
</svg>
</body>
</html>
将这段代码保存为HTML文件，并在浏览器中打开，你将看到一个蓝色的纸飞机沿着预定义的路径飞行。你可以根据需要调整纸飞机的形状、颜色、飞行路径和动画持续时间。
标签：CSS3,动画,元素,SVG,路径,飞行,纸飞机 From： https://www.cnblogs.com/ai888/p/18626527