CSS3 background gradient渐变兼容实现加载中loading效果实例页面

回到相关文章 »

代码：

CSS代码：
/* 无限旋转 哔哔哔->奥特曼 */
.spin {
    -webkit-transform: rotate(360deg);
    -webkit-animation: spin 1s linear infinite; 
}
@-webkit-keyframes spin {
    from {-webkit-transform: rotate(0deg);}
      to {-webkit-transform: rotate(360deg);}
}
.spin {
    transform: rotate(360deg);
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from {transform: rotate(0deg);}
      to {transform: rotate(360deg);}
}


/* IE6-IE9实现 */
.loading {
    width: 32px; height: 32px;
    background: url(loading-css3.gif);
    /* IE10+ 去背景 */
    background:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(0,0,0,0)), to(rgba(0,0,0,0)));
    background:-moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0));
    background:-ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0));
    background:-o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0));
    background:linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0));
}
/* IE10+ and other */
.loading::after {
    content: '';
    width: 3px; height:3px;
    margin: 14.5px 0 0 14.5px;
    border-radius: 100%;                      /* 圆角 */
    box-shadow: 0 -10px 0 1px #333,           /* 上, 1px 扩展 */
                10px 0px #333,                /* 右 */    
                0 10px #333,                  /* 下 */
                -10px 0 #333,                 /* 左 */
                              
                -7px -7px 0 .5px #333,        /* 左上, 0.5px扩展 */
                7px -7px 0 1.5px #333,        /* 右上, 1.5px扩展 */                    
                7px 7px #333,                 /* 右下 */
                -7px 7px #333;                /* 左下 */
    position: absolute;
}
HTML代码：
<div class="loading spin"></div>

效果：