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

相关推荐
盛夏绽放7 小时前
jQuery 知识点复习总览
前端·javascript·jquery
胡gh9 小时前
依旧性能优化,如何在浅比较上做文章,memo 满天飞,谁在裸奔?
前端·react.js·面试
大怪v9 小时前
超赞👍!优秀前端佬的电子布洛芬技术网站!
前端·javascript·vue.js
胡gh9 小时前
你一般用哪些状态管理库?别担心,Zustand和Redux就能说个10分钟
前端·面试·node.js
项目題供诗9 小时前
React学习(十二)
javascript·学习·react.js
无羡仙10 小时前
Webpack 背后做了什么?
javascript·webpack
roamingcode11 小时前
Claude Code NPM 包发布命令
前端·npm·node.js·claude·自定义指令·claude code
码哥DFS11 小时前
NPM模块化总结
前端·javascript
灵感__idea11 小时前
JavaScript高级程序设计(第5版):代码整洁之道
前端·javascript·程序员
唐璜Taro11 小时前
electron进程间通信-IPC通信注册机制
前端·javascript·electron