利用CSS模拟太阳系运转

<!DOCTYPE html>
<html>
<head>
<title>太阳系</title>
<meta charset="utf-8">
<style type="text/css">
body{
background: black;/*设置背景颜色*/
display: flex;/*多栏多列布局*/
justify-content: center; /*用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。值：居中*/
align-items: center;/*属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。值：居中*/
}
.path{
width: 600px;
height: 600px;
border:1px white solid;/*缩写边框属性设置在一个声明中所有的边框属性。值：宽度颜色样式（定义实线）*/
border-radius: 300px;/*半径*/

display: flex; /*属性规定元素应该生成的框的类型。*/
justify-content: center;
align-items: center;
position: relative;/*属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。值：生成相对定位的元素，相对于其正常位置进行定位。*/
}
.path2{
width: 400px;
height: 400px;
border:1px white solid;
border-radius: 200px;

display: inline-flex;
justify-content: center;
align-items: center;
position: relative;

}
.path3{
width: 300px;
height: 300px;
border:1px white solid;
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: flyMars 6s infinite linear;
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: flyEarth 10s infinite linear;
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: flyEarth 20s infinite linear;
transform-origin: 50% 220px;

}
.sun{
width: 60px;
height: 60px;
background: red;
border-radius: 30px;

display: flex;
justify-content: center;
align-items: center;
animation: sun 5s infinite;
transform-origin: 50% 50%;
}

@keyframes flyMars{
100%{
transform: rotate(1turn);
}
}
@keyframes flyEarth{
100%{
transform: rotate(360deg );/*也可设置成1turn*/
}
}
@keyframes flyjup{
100%{
transform-origin: (1turn);
}
}
@keyframes sun{
100%{
transform-origin: (1turn);
}
}
html,body{
height: 100%;
}
</style>
</head>
<body>
<div class="path">
<div class="path2">
<div class="path3">
<div class="mars">火星</div>
<div class="earth">地球</div>

<div class="jupiter">木星</div>
<div class="sun">太阳</div>
</div>
</div>
</div>
</body>
</html>

利用CSS模拟太阳系运转

猜你喜欢