css implementation loadinganimationThe effect is as follows:
html
<div class="ui-loading-wrap"> <p>加载中</p> <i class="ui-loading"></i> </div>
css
.ui-loading-wrap { display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; text-align: center; height: 40px; .ui-loading { width: 20px; height: 20px; display: block; background: url(../img/loading_sprite.png); -webkit-background-size: auto 20px; -webkit-animation: am-rotate 1s steps(12) infinite; @-webkit-keyframes am-rotate { from { background-position: 0 0 } to { background-position: -240px 0 } }
The above is the detailed content of Use css to achieve loading animation effects. For more information, please follow other related articles on the PHP Chinese website!