微信扫码登录 ×
css3 svg纸飞机动画特效

css3 svg纸飞机动画特效

收藏
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>

使用声明

1. 本站所有素材(未指定商用),仅限学习交流。
2. 会员在本站下载的原创商用和VIP素材后,只拥有使用权,著作权归原作者及17素材网所有。
3. 原创商用和VIP素材,未经合法授权,请勿用于商业用途,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途,织梦系统商业用途请预先授权。

x
×
×

注册

QQ注册 立即下载 微信注册 立即下载

签到成功!

已连续签到1天,连续签到3天可获得50积分

知道了