css+伪类+加载动画,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代码：