首页

源码搜藏网

首页 > 网页特效 > 其他代码 >

HTML5 SVG实现过山车动画

创建时间:2014-06-07 09:36  

HTML5 SVG实现过山车动画
HTML5 SVG实现过山车动画
效果预览 立即下载
HTML5 SVG实现过山车动画是一款很酷的HTML5 SVG动画,这款HTML5动画是过山车效果,主要是利用了SVG的path动画来实现的,效果非常酷。HTML5SVG过山车动画效果

 <!-- <rect width="20" height="20" x="0" y="0" fill="red" /> -->
      <polygon fill="none" points="0,0 107.793,0 107.793,-107.793 0,-107.793 "/>
      <polygon fill="none" points="0,0 107.793,0 107.793,-107.793 0,-107.793 "/>
      <path fill="#00A0B1" d="M107.793,0v-107.793H0V0H107.793z M5.886-10.632v-86.53L49.15-53.898L5.886-10.632z M53.969-49.08
        L97.472-5.576H10.463L53.969-49.08z M10.773-101.908h86.386L53.967-58.715L10.773-101.908z M101.907-97.018v86.24L58.786-53.896
        L101.907-97.018z"/>
      <path fill="#00A0B1" d="M0-5.576v-14.867c11.291,0,20.443,9.152,20.443,20.443H5.576C5.576-3.08,3.08-5.576,0-5.576z"/>
      <path fill="#008F9E" d="M0,0v-5.576C3.08-5.576,5.576-3.08,5.576,0H0z"/>
      <path fill="#00A0B1" d="M102.217,0H87.35c0-11.291,9.152-20.443,20.443-20.443v14.867C104.713-5.576,102.217-3.08,102.217,0z"/>
      <path fill="#008F9E" d="M107.793,0h-5.576c0-3.08,2.496-5.576,5.576-5.576V0z"/>
      <path fill="#00A0B1" d="M5.575-107.793h14.868C20.443-96.502,11.291-87.35,0-87.35v-14.867
        C3.08-102.217,5.575-104.713,5.575-107.793z"/>
      <path fill="#008F9E" d="M0-107.793h5.575c0,3.08-2.495,5.576-5.575,5.576V-107.793z"/>
      <path fill="#00A0B1" d="M107.793-102.218v14.868c-11.291,0-20.443-9.152-20.443-20.443h14.867
        C102.217-104.713,104.713-102.218,107.793-102.218z"/>
      <path fill="#008F9E" d="M107.793-107.793v5.575c-3.08,0-5.576-2.495-5.576-5.575H107.793z"/>
上一篇:带收藏、转载和返回顶部的jquery瀑布流特效
下一篇:js表格列表全选反选删除

相关内容

热门推荐