星系軌道
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
background-color: #000;
overflow: hidden;
}
.center{
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
.sun{
width: 80px;
height: 80px;
background-color: yellow;
border-radius: 50%;
}
.earth{
width: 250px;
height: 250px;
border: 1px solid #ccc;
border-radius: 50%;
animation:rot 4s linear infinite;
}
.earth::before{
content:"";
width: 40px;
height: 40px;
background-color: deepskyblue;
position: absolute;
left:0;
top:50%;
transform:translate(-50%,-50%);
border-radius: 50%;
}
.moon{
width:60px;
height: 60px;
border-radius: 50%;
position: absolute;
transform:translate(-50%,-50%);
left:0;
top:50%;
animation:rot 2s linear infinite;
}
.moon::before{
content:"";
width: 10px;
height: 10px;
background-color: #fff;
position: absolute;
left:0;
top:50%;
transform:translate(-50%,-50%);
border-radius: 50%;
}
.mars{
width: 400px;
height: 400px;
border: 1px solid #ccc;
border-radius: 50%;
animation:rot 6s linear infinite;
}
.mars::before{
content:"";
width: 50px;
height: 50px;
background-color: coral;
position: absolute;
left:0;
top:50%;
transform:translate(-50%,-50%);
border-radius: 50%;
}
.venus{
width: 550px;
height: 550px;
border: 1px solid #ccc;
border-radius: 50%;
/*調(diào)用動畫*/
animation:rot 8s linear infinite;
}
.venus::before{
content:"";
width: 60px;
height: 60px;
background-color: #daa520;
position: absolute;
left:0;
top:50%;
transform:translate(-50%,-50%);
border-radius: 50%;
}
@keyframes rot {
0%{
transform:translate(-50%,-50%) rotate(0deg);
}
100%{
transform:translate(-50%,-50%) rotate(360deg);
}
}
</style>
</head>
<body>
<!-- 太陽-->
<div class="sun center"></div>
<!-- 地球-->
<div class="earth center">
<!-- 月球-->
<div class="moon "></div>
</div>
<!-- 火星-->
<div class="mars center"></div>
<!--金星-->
<div class="venus center"></div>
</body>
</html>
感興趣的可以去體驗一下，這里面主要用到的是CSS3里面的動畫，還有一個知識點，就是如何讓一個元素居中，還有偽元素。這算是初步了解C3的知識了吧。
這里面可以引出好多知識：比如居中顯示問題，如何讓一個不給高度的元素居中（display:flex;justify-content:center;align-items:center;）還有動畫問題，到底用C3實現(xiàn)動畫還是js來實現(xiàn)等等吧········
