沿着路径滑翔的纸飞机【原创

来源:https://www.sucaihuo.com/js/2458.html 2017-07-18 23:40浏览(780) 收藏

一款沿着路径滑翔的纸飞机动画特效,纸飞机从页面的左侧进入,并验证设定好的路径滑翔飞行,到达页面的的最右侧后恢复到初始状态,至此无限循环下去,喜欢的童鞋请收下吧。
沿着路径滑翔的纸飞机
分类:html/css > 图形 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的head部分,仅需引入一个CSS样式文件即可,代码如下:

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分,将所有元素放置于一个div容器里,这里注意一下用于创建多边形的SVG字标签polygon,代码如下:

<div class="container"> 
  <svg viewBox="0 0 3387 1270">
    <path id="planePath" class="planePath" d="M-226 626c439,4 636,-213 934,-225 755,-31 602,769 1334,658 562,-86 668,-698 266,-908 -401,-210 -893,189 -632,630 260,441 747,121 1051,91 360,-36 889,179 889,179"/>
  <g  id="plane">
   <polygon class="fil1" points="-141,-10 199,0 -198,-72 -188,-61 -171,-57 -184,-57 "/>
   <polygon class="fil2" points="199,0 -141,-10 -163,63 -123,9 "/>
   <polygon class="fil3" points="-95,39 -113,32 -123,9 -163,63 -105,53 -108,45 -87,48 -90,45 -103,41 -94,41 "/>
   <path class="fil4" d="M-87 48l-21 -3 3 8 19 -4 -1 -1zm-26 -16l18 7 -2 -1 32 -7 -29 1 11 -4 -24 -1 -16 -18 10 23zm10 9l13 4 -4 -4 -9 0z"/>
   <polygon class="fil1" points="-83,28 -94,32 -65,31 -97,38 -86,49 -67,70 199,0 -123,9 -107,27 "/>
  </g>
</svg> 
</div>
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:https://www.sucaihuo.com/js/2458.html
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2