浙江 杭州

jQuery和SVG炫酷弹射纸飞机动画特效

系统分类: 网页特效 - html5 - html5模板 2017-03-08

人气5992

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


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

制作方法

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);
  }
}             
              
JAVASCRIPT

该特效的js代码中将各个功能都封装为一个函数。每个函数都带有相应的注释,可以查看源文件了解他们的功能。

查看演示
下载资源:1
下载资源
错误提交:

格式:zip 大小:21.17KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-2057.html 非特殊说明,本文版权归原作者所有,转载请注明出处
jQuery和SVG炫酷弹射纸飞机动画特效

我当前G币余额:0 已下载次数:1

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有0 评论)