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. 會員在本站下載的原創(chuàng)商用和VIP素材后，只擁有使用權(quán)，著作權(quán)歸原作者及17素材網(wǎng)所有。
3. 原創(chuàng)商用和VIP素材，未經(jīng)合法授權(quán)，請勿用于商業(yè)用途，會員不得以任何形式發(fā)布、傳播、復制、轉(zhuǎn)售該素材，否則一律封號處理。
4. 本平臺織夢模板僅展示和個人非盈利用途，織夢系統(tǒng)商業(yè)用途請預先授權(quán)。

查看演示下載資源

86 5691 12