图片旋转 loading

<style> html,body{width: 100%;overflow-x: hidden;} *{padding: 0;margin: 0;} .loadLayer{ width: 100%; height: 100%; background: #000000; opacity: 0.7; z-index: 100; position: fixed; top: 0;} .loading{position: fixed; width: 50%; margin: auto; top: 50%; left: 50%;-webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); z-index: 1000;} .loadImg{width: 50%;margin: 0 auto;} .loadImg img{ width: 100%; animation: shake-vertical 0.5s; -webkit-animation: shake-vertical 0.5s; -webkit-animation-timing-function:linear; animation-timing-function:linear; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;} @keyframes shake-vertical { from { transform: rotate(15deg); } to { transform: rotate(360deg); } } @-webkit-keyframes shake-vertical { from { transform: rotate(15deg); } to { transform: rotate(360deg); } } </style> <div class="loadLayer"></div> <div class="loading"> <div class="loadImg"><img src="../images/loading.png"></div> </div>