css3 svg纸飞机动画特效

css3绘制卡通云和树，svg纸飞机飞行动画特效。

[声明] 墨鱼部落格所有资源为用户免费分享产生，若发现您的权利被侵害，请点击后方链接查看并联系我们，我们尽快处理。免责声明|侵权处理流程

使用方法：

1、head引入css文件

<link rel="stylesheet" href="css/style.css">

2、body引入HTML代码

<!--云部分-->
<div class="clouds"></div>

<!--svg 纸飞机-->
<svg class="airplane" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="301.18" height="99.44" viewBox="0 0 301.18 99.44">
  <defs>
    <style>
      .cls-1, .cls-2 {
        fill: #fff;
      }

      .cls-1 {
        stroke: #000;
        stroke-miterlimit: 10;
      }
    </style>
  </defs>
  <title>airplane</title>
  <g>
    <polyline class="cls-1" points="296.18 13.18 1.27 0.56 25.2 24.35"/>
    <g>
      <polygon class="cls-2" points="24.76 23.82 296.61 12.82 34.29 98.78 24.76 23.82"/>
      <path d="M1166.08,987.66,907.75,1072.3l-9.38-73.81,267.71-10.83m7.14-1.29-276,11.17,9.67,76.09,266.31-87.26Z" transform="translate(-873.05 -974.19)"/>
    </g>
    <g>
      <polygon class="cls-2" points="41.11 38.61 295.66 13.13 34.45 98.72 41.11 38.61"/>
      <path d="M1164.18,988.28l-256.1,83.92,6.52-58.94,249.58-25m9-1.91-259.52,26-6.79,61.28,266.31-87.26Z" transform="translate(-873.05 -974.19)"/>
    </g>
    <g>
      <polygon class="cls-2" points="41.76 38.55 297.93 13 99.94 96.46 41.76 38.55"/>
      <path d="M1167.73,988l-194.63,82-57.2-56.93L1167.73,988m6.49-1.65-260.52,26,59.17,58.89,201.35-84.87Z" transform="translate(-873.05 -974.19)"/>
    </g>
  </g>
</svg>

<!--树部分-->
<div class="trees"></div>

文件目录

本资源来自：代码 » CSS3实例 » css3 svg纸飞机动画特效

注：此资源非帝国CMS模板/特效/源码，需要帝国CMS整站模板源码的小伙伴，请移步 帝国CMS模板，感谢支持！