附源代码:
<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<title>Solar</title>
<meta charset="utf-8">
<style type="text/css">
body {
background-color:black;
/*display为flex后,所有flex中的所有子元素都成了伸缩项目,弹性盒子*/
display:flex;
/*横轴的对齐方式*/
justify-content:center;
/*竖轴的对齐方式*/
align-items:center;
}
html,body {
height:100%;
}
.path {
width:600px;
height:600px;
border:1px solid white;
border-radius:50%; /*圆角半径,形成圆的效果*/
display:flex; /* 使用flexible boxes这种布局方式 */
justify-content:center;
align-items:center;
position:relative; /* 相对定位,子元素会相对它进行定位 */
}
.path1{
width: 400px;
height: 400px;
border:1px solid white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.fire{
width: 50px;
height: 50px;
background-color: yellow;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
/*Top和Left定义火星的位置,百分之是相对于父元素,*/
top: 75px;
left: calc(50% - 30px);
/*calc是计算函数,可以直接通过表达式计算*/
transform-origin: 50% 225px;
/*定义火星的旋转点*/
animation: fly 6s infinite linear;
/*调用函数,值分别为 函数名 时间 循环次数 速度*/
}
.sun {
width:100px;
height:100px;
background-color:red;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
}
.earth {
width:100px;
height:100px;
background-color:blue;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
/* 绝对定位,想相对于父元素进行任意位置的布局,一般采用绝对定位,此处是相对于path进行绝对定位
*/
position:absolute;
top:550px;
left:calc(50% - 50px); /*基于父视图坐标系*/
transform-origin:50%-250px; /* 基于自身坐标系 */
animation:fly 12s infinite linear;
border:1px solid white;
border-radius:50%;
}
.earth1 {
width:100px;
height:100px;
background-color:blue;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
/* 绝对定位,想相对于父元素进行任意位置的布局,一般采用绝对定位,此处是相对于path进行绝对定位
*/
position:absolute;
top:-50px;
left:calc(50% - 50px); /*基于父视图坐标系*/
transform-origin:50% 350px; /* 基于自身坐标系 */
animation:fly 10s infinite linear;
/*调用函数,值分别为 函数名 时间 循环次数 速度*/
}
#moon{width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: -25px;
left: calc(50% - 25px);
transform-origin:50% 75px;
animation: fly 1s infinite linear;
}
@keyframes fly {
100% {
transform:rotate(1turn);
}
}
</style>
</head>
<body>
<div class="path">
<div class="path1">
<div class="sun">太阳</div>
<div class="earth">地球
<div id="moon">月亮</div>
</div>
<div class="earth1">地球1</div>
<div class="fire">火星</div>
</div>
</div>
</body>
</html>
效果图:
知识点:
- calc(),表示计算函数,括号中写表达式,eg:50%-30px,浏览器会计算该值
- 百分之的数,是针对于父元素的数值,eg:父元素的width是300px,如果子元素中有50%,则该值为150px
- transform-origin:100px 200px,表示(X轴移动)竖向移动和(Y轴移动)横向移动
- transform:rotate(40deg),表示旋转40度,默认旋转的点为自身中心
- animation:fly 6s infinite linear,表示调用fly函数,时间为6秒,循环方式为无限循环,速度为匀速
- 该文件要注意div的位置摆放,要搞清楚父元素和子元素的顺序