当前位置：首页 > 网页特效 > 动画效果

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

分类：动画效果日期：2024-05-14 点击(1) 评论(0)

简介

##### HTML结构
背景中的树和景色使用的是SVG来制作。

```html
<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>
      <path class="svgBg__bg svgBg__bg2" fill="#3C929A" d="M0,156 106,136 272,172 342,124 366,144 366,256 0,256z" ></path>
      <path class="svgBg__bg svgBg__bg3" fill="#416175" d="M0,170 62,160 235,148 305,145 366,153 366,256 0,256z" ></path>
      <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>
        <path class="svgBg__tree-trunk svgBg__tree-part" d="M56,147 Q55,115 54,83 Q53,115 52,146" ></path>
      </g>
      ......
    </g>
  </svg>
</div>   
```     
小纸飞机也是使用SVG来制作。

```html
<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帧动画。

```html
.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代码中将各个功能都封装为一个函数。每个函数都带有相应的注释，可以查看源文件了解他们的功能。

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果