最近练习css动画。写两种“多个行星围绕中心恒星旋转”

一种是中间恒星旋转，直接上代码

	<div class="center">
				<div class="box1">
					<view class="box1_child">我是</view>
				</div>
				<div class="box2">2</div>
				<div class="box3">3</div>
				<div class="box4">4</div>
			</div>
	
	<style>
	@keyframes center_turn{
		0%{transform: rotate(0deg)}
		100%{transform: rotate(360deg)}
	}
		
	@keyframes turn1{
	0%{transform: rotate(360deg)}
	100%{transform: rotate(0deg)}
	}
	@keyframes turn2{
		0%{transform: rotate(360deg)}
		100%{transform: rotate(0deg)}
	}
	@keyframes turn3{
		0%{transform: rotate(360deg)}
		100%{transform: rotate(0deg)}
	}
	@keyframes turn4{
		0%{transform: rotate(360deg)}
		100%{transform: rotate(0deg)}
	}
	div{
	border-radius: 50%;
	}
	.center{
	height: 200px;
	width: 200px;
	margin: 200px;
	background-color: red;
	position: relative;
	animation:center_turn 30s linear 0s infinite normal;
	}
	.center div{
	width: 100px;
	height: 100px;
	
	}
	.box1{
	position: absolute;
	top: -100px;
	left: 50px;
	animation-name:turn1;
	animation-timing-function: linear;
	animation-duration: 30s;
	animation-iteration-count: infinite;
	background-color: green;
	display: flex;
	align-items: center;
	justify-content: center;
		
		.box1_child{
			
			color: #ff0000;
			
		}
	}
	.box2{
	position: absolute;
	top: 50px;
	left: -100px;
	animation-name:turn2;
	animation-timing-function: linear;
	animation-duration: 30s;
	animation-iteration-count: infinite;
	background-color: navy;
	}
	.box3{
	position: absolute;
	top: 50px;
	left: 200px;
	animation-name:turn3;
	animation-timing-function: linear;
	animation-duration: 30s;
	animation-iteration-count: infinite;
	background-color: sandybrown;
	}
	.box4{
	position: absolute;
	top: 200px;
	left: 50px;
	animation-name:turn4;
	animation-timing-function: linear;
	animation-duration: 30s;
	animation-iteration-count: infinite;
	background-color: pink;
	}
	</style>

另一种是中心恒星静止不动，行星跳动，形成类似围绕旋转效果

<div class="center">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>

	<style>
	@keyframes turn1{
	0%{transform: translate(0,0)}
	50%{transform: translate(-150px,0)}
	100%{transform: translate(-150px,150px)}
	}
	@keyframes turn2{
	0%{transform: translate(0,0)}
	50%{transform: translate(0,150px)}
	100%{transform: translate(150px,150px)}
	}
	@keyframes turn3{
	0%{transform: translate(0,0)}
	50%{transform: translate(0,-150px)}
	100%{transform: translate(-150px,-150px)}
	}
	@keyframes turn4{
	0%{transform: translate(0,0)}
	50%{transform: translate(150px,0)}
	100%{transform: translate(150px,-150px)}
	}
	div{
	border-radius: 50%;
	}
	.center{
	height: 200px;
	width: 200px;
	margin: 200px;
	background-color: red;
	position: relative;
	}
	.center div{
	width: 100px;
	height: 100px;
	}
	.box1{
	position: absolute;
	top: -100px;
	left: 50px;
	animation-name:turn1;
	animation-timing-function: linear;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	background-color: green;
	
	}
	.box2{
	position: absolute;
	top: 50px;
	left: -100px;
	animation-name:turn2;
	animation-timing-function: linear;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	background-color: navy;
	}
	.box3{
	position: absolute;
	top: 50px;
	left: 200px;
	animation-name:turn3;
	animation-timing-function: linear;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	background-color: sandybrown;
	}
	.box4{
	position: absolute;
	top: 200px;
	left: 50px;
	animation-name:turn4;
	animation-timing-function: linear;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	background-color: pink;
	}
	</style>

下面是第一种方式的效果，第二种类似的。