Rumah > hujung hadapan web > tutorial css > 使用css实现加载中动画效果

使用css实现加载中动画效果

PHPz
Lepaskan: 2017-04-02 10:32:28
asal
2301 orang telah melayarinya

css实现加载中动画效果如下:

1467969834174617.png

html

<div class="ui-loading-wrap">
     <p>加载中</p>
      <i class="ui-loading"></i>
</div>
Salin selepas log masuk

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
    }
}
Salin selepas log masuk

图片地址:

1467970003251816.png

Atas ialah kandungan terperinci 使用css实现加载中动画效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
css
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan