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

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

在现代网页设计中，动画效果可以显著提升用户体验。本文将介绍如何使用 CSS3 和 SVG 绘制一架纸飞机，并使其沿着一个固定的路径飞行。下面的示例将涵盖从创建 SVG 图像到实现动画的整个过程。

1. 创建纸飞机的 SVG 图像

首先，我们需要设计一架简单的纸飞机。使用 SVG，我们可以轻松创建一个纸飞机的形状。以下是 SVG 代码示例：

html 复制代码

<svg id="paper-plane" width="100" height="100" viewBox="0 0 100 100">
  <polygon points="10,90 50,10 90,90 50,70" fill="lightblue" stroke="blue" stroke-width="2"/>
</svg>

在这个示例中，我们使用了 <polygon> 元素来绘制纸飞机的形状。points 属性定义了纸飞机的四个顶点坐标。

2. 创建动画路径

接下来，我们需要定义纸飞机飞行的路径。我们将使用 SVG 的 <path> 元素来创建一个贝塞尔曲线作为动画路径。以下示例定义了一个简单的路径：

html 复制代码

<svg width="500" height="500">
  <path id="flight-path" d="M 50 400 C 150 100, 350 100, 450 400" fill="transparent" stroke="lightgray" />
</svg>

此路径从坐标 (50, 400) 出发，经过两个控制点，最终到达 (450, 400)。

3. 结合纸飞机和路径

接下来，我们将纸飞机和路径放在同一个 SVG 中，以便我们可以对纸飞机进行动画处理。

html 复制代码

<svg width="500" height="500">
  <path id="flight-path" d="M 50 400 C 150 100, 350 100, 450 400" fill="transparent" stroke="lightgray" />
  <polygon id="paper-plane" points="10,90 50,10 90,90 50,70" fill="lightblue" stroke="blue" stroke-width="2"/>
</svg>

4. 使用 CSS3 实现动画

最后，我们使用 CSS3 的 @keyframes 动画来实现纸飞机沿路径飞行。我们将通过 transform 属性移动纸飞机。

css 复制代码

@keyframes fly {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    transform: translate(400px, 0) rotate(360deg);
  }
}

#paper-plane {
  animation: fly 4s linear infinite;
}

在这个动画中，纸飞机从起点 (0, 0) 开始，经过 4 秒到达终点，并且在飞行过程中不断旋转。

5. 完整代码示例

以下是完整的代码示例，将所有部分结合在一起：

html 复制代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        @keyframes fly {
            0% {
                transform: translate(0, 0) rotate(0deg);
            }
            100% {
                transform: translate(400px, 0) rotate(360deg);
            }
        }

        #paper-plane {
            animation: fly 4s linear infinite;
            transform-origin: center; /* 设置旋转中心 */
        }
    </style>
    <title>纸飞机动画</title>
</head>
<body>
    <svg width="500" height="500">
        <path id="flight-path" d="M 50 400 C 150 100, 350 100, 450 400" fill="transparent" stroke="lightgray" />
        <polygon id="paper-plane" points="10,90 50,10 90,90 50,70" fill="lightblue" stroke="blue" stroke-width="2"/>
    </svg>
</body>
</html>

6. 总结

通过以上步骤，我们成功地使用 CSS3 和 SVG 绘制了一架纸飞机，并使其沿固定路径飞行。这一过程展示了 SVG 的灵活性和 CSS 动画的强大功能。您可以根据自己的需要修改路径和动画效果，创造出更加精彩的动画效果。