css 实现图图片旋转

学习代表未来

于 2019-04-16 15:55:28 发布

阅读量6.2k

点赞数 2

分类专栏： css jquery 文章标签： css 图片旋转

css 同时被 2 个专栏收录

32 篇文章

订阅专栏

jquery

31 篇文章

订阅专栏

本文详细介绍了如何使用CSS3动画实现图片旋转效果，并通过jQuery控制图片加载后的显示与隐藏，实现了网页美观与功能性的结合。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>