jQuery和SVG炫酷弹射纸飞机动画特效_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款效果超级炫酷的jQuery和SVG弹射纸飞机动画特效。用户可以拖动指定区域，当鼠标松开时，一架小飞机被弹射出去，飞行一圈后有回到原来的位置。同时背景中的树和下面的列表项也会有动画效果。

制作方法

HTML结构

背景中的树和景色使用的是SVG来制作。

<div class="demo__top">
  <svg class="demo__top-svgBg" viewBox="0 0 366 256">
    <g class="svgBg__objects">
      <path class="svgBg__bg svgBg__bg1" fill="#86D7DB" d="M0,143 88,107 224,153 348,109 366,123 366,256 0,256z" />
      <path class="svgBg__bg svgBg__bg2" fill="#3C929A" d="M0,156 106,136 272,172 342,124 366,144 366,256 0,256z" />
      <path class="svgBg__bg svgBg__bg3" fill="#416175" d="M0,170 62,160 235,148 305,145 366,153 366,256 0,256z" />
      <g class="svgBg__tree svgBg__tree-1 m--left" data-id="1">
        <path class="svgBg__tree-leafs svgBg__tree-part" fill="#389296" d="M54,127 C77,127 62,95 54,63 C46,95 31,127 54,127" />
        <path class="svgBg__tree-trunk svgBg__tree-part" d="M56,147 Q55,115 54,83 Q53,115 52,146" />
      </g>
      ......
    </g>
  </svg>
</div>

小纸飞机也是使用SVG来制作。

<div class="plane">
  <svg class="plane-svg" viewBox="0 0 28 26">
    <path class="plane-svg__path" fill="#fff" d="M0,0 28,13 0,26 0,13 20,13 0,7z" />
  </svg>
</div>

CSS样式

该弹射纸飞机特效的CSS样式并不是十分复杂，其中纸飞机的飞行动画使用的是planeFly帧动画。

.plane.fly {
  -webkit-animation: planeFly 3.5s forwards;
          animation: planeFly 3.5s forwards;
}              
@keyframes planeFly {
  28% {
    -webkit-transform: translate(55rem, 13rem) rotate(20deg) scale(0.7);
            transform: translate(55rem, 13rem) rotate(20deg) scale(0.7);
  }
  35% {
    -webkit-transform: translate(45rem, -8rem) rotate(-160deg) scale(0.5);
            transform: translate(45rem, -8rem) rotate(-160deg) scale(0.5);
  }
  85% {
    -webkit-transform: translate(-15rem, -4rem) rotate(-180deg) scale(0.7);
            transform: translate(-15rem, -4rem) rotate(-180deg) scale(0.7);
  }
  90% {
    -webkit-transform: translate(-15rem, 0) rotate(0deg);
            transform: translate(-15rem, 0) rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}