Html
    Css
    Js

    
                        
  * {
	margin:0;
	padding:0;
	background:#040818;
	background-size:1000%;
}
.box {
	position:relative;
	width:800px;
	height:800px;
	margin:100px auto;
	transition:all 3s ease;
	transform-origin:center;
	animation:round 20s infinite linear;
}
@keyframes round {
	0% {
	transform:rotateZ(0deg)
}
100% {
	transform:rotateZ(360deg)
}
}.sn {
	position:absolute;
	top:calc(50% - 125px);
	left:calc(50% - 125px);
	border:1px solid gray;
	border-radius:50%;
}
.sn_1 {
	width:250px;
	height:250px;
	z-index:99;
	animation:round 10s infinite linear;
}
.sn_1::after {
	position:absolute;
	left:0px;
	top:75px;
	content:'';
	display:block;
	width:15px;
	height:15px;
	border-radius:50%;
	background-color:red;
}
.sn_2::before {
	position:absolute;
	content:'';
	display:block;
	width:5px;
	height:5px;
	background-color:chartreuse;
	border-radius:50%;
	left:25px;
	top:40px;
	transform-origin:12px 12px;
	animation:round 5s infinite linear;
}
.sn_2 {
	top:calc(50% - 150px);
	left:calc(50% - 150px);
	width:300px;
	height:300px;
	z-index:89;
	background-size:100%;
}
.sn_2::after {
	position:absolute;
	left:30px;
	top:45px;
	content:'';
	display:block;
	width:15px;
	height:15px;
	border-radius:50%;
	background-color:lawngreen;
}
.sn_3 {
	top:calc(50% - 175px);
	left:calc(50% - 175px);
	width:350px;
	height:350px;
	z-index:79;
	background-size:100%;
}
.sn_3::after {
	position:absolute;
	left:30px;
	top:55px;
	content:'';
	display:block;
	width:15px;
	height:15px;
	border-radius:50%;
	background-color:fuchsia;
}
.sn_4 {
	position:absolute;
	top:calc(50% - 200px);
	left:calc(50% - 200px);
	width:400px;
	height:400px;
	z-index:69;
	background-size:100%;
	animation:round 8s infinite linear;
}
.sn_4::after {
	position:absolute;
	left:25px;
	top:300px;
	content:'';
	display:block;
	width:15px;
	height:15px;
	border-radius:50%;
	background-color:tomato;
}
.sn_5::before {
	position:fixed;
	left:207px;
	top:0px;
	content:'';
	display:block;
	width:5px;
	height:5px;
	background-color:#CC9900;
	border-radius:50%;
	z-index:60
}
.sn_5 {
	top:calc(50% - 225px);
	left:calc(50% - 225px);
	width:450px;
	height:450px;
	z-index:59;
	animation:round 15s infinite linear;
}
.sn_5::after {
	position:absolute;
	left:200px;
	top:-8px;
	content:'';
	display:block;
	width:15px;
	height:20px;
	border-radius:50%;
	background:#040818;
	border:2px solid gray;
}
.sn_6 {
	top:calc(50% - 250px);
	left:calc(50% - 250px);
	width:500px;
	height:500px;
	z-index:49;
}
.sn_6::after {
	position:absolute;
	left:50px;
	top:400px;
	content:'';
	display:block;
	width:15px;
	height:15px;
	border-radius:50%;
	background-color:#fff;
}
.sn_7 {
	top:calc(50% - 275px);
	left:calc(50% - 275px);
	width:550px;
	height:550px;
	z-index:39;
}
.sn_7::after {
	position:absolute;
	left:500px;
	top:120px;
	content:'';
	display:block;
	width:15px;
	height:15px;
	border-radius:50%;
	background-color:purple;
}
.sn_8 {
	top:calc(50% - 300px);
	left:calc(50% - 300px);
	width:600px;
	height:600px;
	z-index:29;
}
.sn_8::after {
	position:absolute;
	left:300px;
	top:-8px;
	content:'';
	display:block;
	width:15px;
	height:15px;
	border-radius:50%;
	background-color:orange;
}
.sn_9 {
	top:calc(50% - 325px);
	left:calc(50% - 325px);
	width:650px;
	height:650px;
	z-index:19;
}
.sn_9::after {
	position:absolute;
	left:200px;
	top:10px;
	content:'';
	display:block;
	width:20px;
	height:20px;
	border-radius:50%;
	background-color:blue;
}
.sn_10 {
	top:calc(50% - 75px);
	left:calc(50% - 75px);
	background:#CC9900;
	width:150px;
	height:150px;
	z-index:100;
	box-shadow:0 0 25px 5px #CC9900;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

行星环绕旋转的动画

更新时间:2019-09-08 22:44:04

行星环绕动画 .使用动画完成的运动旋转

0