JS实现转动效果

方案一

<div class="div_uploading">
<div class="div_uploading_scroll"></div>
<div class="div_uploading_content"></div>
</div>

 

CSS样式

@keyframes scroll
{
0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}

.div_uploading
{
width:150px;
height:150px;
z-index:10001;
position:absolute;
top:40%;
left:40%;
}

.div_uploading_scroll
{
width:185px;
height:185px;
background:url(../../image/book/uploading1.png);
position: absolute;
border-radius: 185px;
left: 0;
top: 0;
animation:scroll 2s infinite linear;
}

.div_uploading_content
{
width: 113px;
height: 113px;
background: url(../../image/book/uploading2.png);
position: absolute;
border-radius: 113px;
top: 35px;
left: 35px;
}

 

 

方案二

<div class="uploadimg">
上传中...
</div>

CSS

.uploadimg
{
width:120px;
height:120px;
background:url(../../image/book/uploading3.png);
position:absolute;
top:50%;
left:50%;
margin-left:-180px;
margin-top:-95px;
text-align:center;
line-height:120px;
color:#fff;
display:none;
z-index:10001;
}

 

JS

var index;
function uoloading() {
index = 0;
this.st = window.setInterval(function(){
var x = index%6;
var y = parseInt(index/6)
$(".uploadimg").css({"background-position":-x*120+"px "+ -y*120+"px"});
index ++;
index = index==36 ? 0 : index;
},80);
}

转载于:https://www.cnblogs.com/vofill/p/5610191.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值