CSS를 사용하여 로딩 애니메이션 효과 얻기

애니메이션 로딩의 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!