CSS3单纯一个input框实现加载中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框样式重置，去光标 */
    line-height: 0; margin: 0; padding: 0;
    border: 0; outline: none; font-size: 0; text-indent:-1px;    
    cursor: default;
    pointer-events: none;
}
/* IE10+以及其他或骚或帅之流 */
.loading:valid {
    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" onfocus="this.blur();" hidefocus="true">

效果：