web旋转动画

最新推荐文章于 2023-03-10 17:02:49 发布

置顶 Revival_Liang

最新推荐文章于 2023-03-10 17:02:49 发布

阅读量947

点赞数

CC 4.0 BY-SA版权

分类专栏： web

本文链接：https://blog.csdn.net/Revival_Liang/article/details/59489721

web 专栏收录该内容

75 篇文章

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8" />
<style type="text/css">
	body{
		text-align: center;
	}
	div{
		display: inline-block;
	}
.box{
	display: inline-block;
	width: 1000px;
	height: 500px;
	position: relative;
	text-align: center;
}
.child{
	top: 100px;
	text-align: center;
	width: 440px;
	height: 440px;
	position: relative;
	-webkit-animation: myrotate 86400s infinite;
}
/*太阳*/
.child > div:nth-child(1){
	transform: translate(-50%,-50%);
	position: absolute;
	top: 50%;
	border-radius: 50%;
	width: 80px;
	height: 80px;
	background: red;
}
/*地球和月亮的div*/
.child > div:nth-child(2){
	z-index: 1;
	top: 120px;
	left: 50px;
	width: 60px;
	height: 60px;
	position: absolute;
	text-align: center;
	animation: childrotate 86400s infinite;
}
/*地球*/
.child > div > div:nth-child(1){
	width: 20px;
	height: 20px;
	background: green;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%,-50%);
}
/*月亮，最小的*/
.child > div >div:nth-child(2){
	border-radius: 50%;
	width: 10px;
	height: 10px;
	background: dimgray;
	position: absolute;
}
.child > div:nth-child(3){
	transform: translate(-50%,-50%);
	position: absolute;
	top: 50%;
	border-radius: 50%;
	width: 310px;
	height: 310px;
	border: 1px solid gray;
	background: transparent;
}
@keyframes myrotate{
	/*在规定的时间内，完成4000000度的旋转*/
	0%{
	-webkit-transform: rotate(0deg);	
	}
	100%{
	-webkit-transform: rotate(4000000deg);	
	}
}
@keyframes childrotate{
	/*在规定的时间内，完成50000000度的旋转*/
	0%{
	-webkit-transform: rotate(0deg);	
	}
	100%{
	-webkit-transform: rotate(50000000deg);	
	}
}
</style>
</head>
<body>
<div class="box">
	<div class="child">
		<div></div>
		<div>
			<div></div>
			<div></div>
		</div>
		<div></div>
	<div></div>
	</div>
</div>
</body>
</html>

效果gif图：