网站地图    收藏    合作   

主页 > 前端 > css3 >

css3加载中动画以及图片

来源:未知    时间:2016-07-08 17:23 作者:xxadmin 阅读:

[导读] css实现加载中动画效果如下: html divclass=ui-loading-wrapp加载中/piclass=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{wid...

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

blob.png

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
    }
}

图片地址:

下载图片

loading_sprite.png


自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论