利用CSS模拟太阳系运转
xvzhengyang 2016-07-19
<!DOCTYPEhtml>
<html>
<head>
<title>太阳系</title>
<metacharset="utf-8">
<styletype="text/css">
body{
background:black;/*设置背景颜色*/
display:flex;/*多栏多列布局*/
justify-content:center;/*用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。值：居中*/
align-items:center;/*属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。值：居中*/
}
.path{
width:600px;
height:600px;
border:1pxwhitesolid;/*缩写边框属性设置在一个声明中所有的边框属性。值：宽度颜色样式（定义实线）*/
border-radius:300px;/*半径*/
display:flex;/*属性规定元素应该生成的框的类型。*/
justify-content:center;
align-items:center;
position:relative;/*属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。值：生成相对定位的元素，相对于其正常位置进行定位。*/
}
.path2{
width:400px;
height:400px;
border:1pxwhitesolid;
border-radius:200px;
display:inline-flex;
justify-content:center;
align-items:center;
position:relative;
}
.path3{
width:300px;
height:300px;
border:1pxwhitesolid;
border-radius:150px;
display:inline-flex;
justify-content:center;
align-items:center;
position:relative;
}
.mars{
width:80px;
height:80px;
background:yellow;
border-radius:40px;
display:flex;
justify-content:center;
align-items:center;
position:absolute;
top:-190px;
animation:flyMars6sinfinitelinear;
transform-origin:50%340px;
}
.earth{
width:60px;
height:60px;
background:blue;
border-radius:30px;
display:flex;
justify-content:center;
align-items:center;
position:absolute;/*如果要实现任意位置的定位，就将其position设置成absolute*/
top:-30px;
animation:flyEarth10sinfinitelinear;
transform-origin:50%180px;
}
.jupiter{
width:40px;
height:40px;
background:white;
border-radius:20px;
display:flex;
justify-content:center;
align-items:center;
position:absolute;/*如果要实现任意位置的定位，就将其position设置成absolute*/
top:-70px;
animation:flyEarth20sinfinitelinear;
transform-origin:50%220px;
}
.sun{
width:60px;
height:60px;
background:red;
border-radius:30px;
display:flex;
justify-content:center;
align-items:center;
animation:sun5sinfinite;
transform-origin:50%50%;
}
@keyframesflyMars{
100%{
transform:rotate(1turn);
}
}
@keyframesflyEarth{
100%{
transform:rotate(360deg);/*也可设置成1turn*/
}
}
@keyframesflyjup{
100%{
transform-origin:(1turn);
}
}
@keyframessun{
100%{
transform-origin:(1turn);
}
}
html,body{
height:100%;
}
</style>
</head>
<body>
<divclass="path">
<divclass="path2">
<divclass="path3">
<divclass="mars">火星</div>
<divclass="earth">地球</div>
<divclass="jupiter">木星</div>
<divclass="sun">太阳</div>
</div>
</div>
</div>
</body>
</html>
