图片加载旋转loading 实例
CSS：代码
1 #loading { 2 width: 100%; 3 height: 100%; 4 background: #8c6239; 5 display: table; 6 position: fixed; 7 top: 0; 8 left: 0; 9 z-index: 1000 10 } 11 12 #loading-icon { 13 display: table-cell; 14 vertical-align: middle; 15 width: 100%; 16 text-align: center 17 } 18 19 @-webkit-keyframes spin { 20 100% { 21 -webkit-transform: rotate(360deg) 22 } 23 24 } 25 26 @-moz-keyframes spin { 27 100% { 28 -webkit-transform: rotate(360deg) 29 } 30 31 } 32 33 @-o-keyframes spin { 34 100% { 35 -webkit-transform: rotate(360deg) 36 } 37 38 } 39 40 @keyframes spin { 41 100% { 42 -webkit-transform: rotate(360deg) 43 } 44 45 } 46 #loading-icon img { 47 -webkit-animation: spin 2s linear infinite; 48 -moz-animation: spin 2s linear infinite; 49 -o-animation: spin 2s linear infinite; 50 animation: spin 2s linear infinite 51 }
HTML代码：
1 <div id="loading"> 2 <div id="loading-icon"><img src="loading.jpg" alt=""></div> 3 </div>
图片素材：
