HTML5 SVG实现过山车动画

 <!-- <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"/>