css 实现图图片旋转

<style>
.box {
	width: 150px;
	height: 150px;
	background: url(login.png) no-repeat center center;
	background-size: cover;
	animation: rotate 2s infinite linear;
	-webkit-animation: rotate 2s infinite linear;
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@-webkit-keyframes rotate {
	from {
		-webkit-transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
	}
}

@-moz-keyframes rotate {
	from {
		-moz-transform: rotate(0deg);
	}
	to {
		-moz-transform: rotate(360deg);
	}
}

@-ms-keyframes rotate {
	from {
		-ms-transform: rotate(0deg);
	}
	to {
		-ms-transform: rotate(360deg);
	}
}

@-o-keyframes rotate {
	from {
		-o-transform: rotate(0deg);
	}
	to {
		-o-transform: rotate(360deg);
	}
}
</style>

<div class="box"></div>

<script>
$(function(){
	// 页面加载完成之后，图片停止旋转并隐藏
setTimeout(function(){
	$(".box").css({
'animation':'none',
'display':'none'
		})
	},1000)
})
</script>