使用CSS3+SVG绘制沿固定路径飞行的纸飞机

在前端开发中，要使用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文件，并在浏览器中打开，你将看到一个蓝色的纸飞机沿着预定义的路径飞行。你可以根据需要调整纸飞机的形状、颜色、飞行路径和动画持续时间。

posted @ 2024-12-24 09:16  王铁柱6  阅读(108)  评论(0)    收藏  举报