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代码:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值