使用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 动画的强大功能。您可以根据自己的需要修改路径和动画效果,创造出更加精彩的动画效果。

相关推荐
东风西巷12 分钟前
猫眼浏览器:简约安全的 Chrome 内核增强版浏览器
前端·chrome·安全·电脑·软件需求
太阳伞下的阿呆12 分钟前
npm安装下载慢问题
前端·npm·node.js
pe7er36 分钟前
Tauri 应用打包与签名简易指南
前端
前端搬砖仔噜啦噜啦嘞38 分钟前
Cursor AI 编辑器入门教程和实战
前端·架构
Jimmy1 小时前
TypeScript 泛型:2025 年终极指南
前端·javascript·typescript
来来走走1 小时前
Flutter dart运算符
android·前端·flutter
Spider_Man1 小时前
栈中藏玄机:从温度到雨水,单调栈的逆袭之路
javascript·算法·leetcode
moddy1 小时前
新人怎么去做低代码,并且去使用?
前端
风清云淡_A1 小时前
【Flutter3.8x】flutter从入门到实战基础教程(五):Material Icons图标的使用
前端·flutter
安心不心安1 小时前
React ahooks——副作用类hooks之useThrottleEffect
前端·react.js·前端框架