图片360度旋转实例

图片加载旋转loading  实例

CSS：代码

#loading {
    width: 100%;
    height: 100%;
    background: #8c6239;
    display: table;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000
}

#loading-icon {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    text-align: center
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg)
    }

}

@-moz-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg)
    }

}

@-o-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg)
    }

}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg)
    }

}
#loading-icon img {
    -webkit-animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    -o-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite
}

HTML代码：

<div id="loading">
    <div id="loading-icon"><img src="loading.jpg" alt=""></div>
</div>

 图片素材：