애니메이션 로딩의 CSS 구현은 다음과 같은 효과를 갖습니다:
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 } }
사진주소:
위 내용은 CSS를 사용하여 로딩 애니메이션 효과 얻기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!