CSS3 optional伪类兼容实现加载中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);
    /* input框样式重置 */
    margin: 0; padding: 0; border: 0;
}
/* IE10+以及其他或骚或帅之流 */
.loading:optional {
    background: none;
    width: 3px; height:3px;
    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;                /* 左下 */
}
HTML代码：
<input class="loading spin" disabled>

效果：