当前位置:首页 > 网页特效 > 其他代码 >

HTML5 SVG实现过山车动画

时间:2014-06-07 09:36 来源:互联网 作者:源码搜藏 收藏 推荐

  • 广告推荐
效果预览 立即下载

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"/>
本站资源仅限于学习研究,严禁从事商业或者非法活动! 源码搜藏网所有源码来自互联网转载与用户上传分享,如果侵犯了您的权益请与我们联系,我们将在24小时内删除!谢谢!

其他代码下载排行

最新文章