css3 旋转+动画 制作太阳系
👇👇👇👇👇👇👇
@keyframes 动画名 { from{开始状态} to{结束状态} }
其实是不需要按顺序排列的（注意：持续时间是必须在延迟时间前面的）
animation: 动画名称 持续时间（数字+s） 执行次数(infinite无限) alternate(来回) 运动曲线(linear线性) 延迟时间;
太阳系代码：👇👇👇
body {
background-color: black;
}
* {
margin: 0;
padding: 0;
}
.dandan {
position: relative;
width: 1000px;
height: 1000px;
/* background-color: rgba(231, 13, 13, 0.267); */
margin: 200px auto;
}
.box {
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: crimson;
box-shadow: 0px 0px 10px 10px rgba(255, 79, 79, 0.548);
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.dan {
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%;
border: 2px solid rgb(255, 255, 255);
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -150px;
animation: bb 5s infinite linear;
}
.dan3 {
position: absolute;
width: 70px;
height: 70px;
background-image: url(./u=1564095015\,1299165939&fm=253&fmt=auto&app=138&f=JPEG.webp);
background-position: 10ex;
background-size: 100px;
top: 50%;
left: -30px;
border-radius: 50%;
animation: vv 3s infinite linear;
}
.dan4 {
position: absolute;
width: 80px;
height: 80px;
border-radius: 50%;
animation: cc 1s infinite linear;
}
.dan4::after {
position: absolute;
content: '';
width: 20px;
height: 20px;
background-color: rgba(255, 251, 0, 0.925);
top: 50%;
left: -30px;
border-radius: 50%;
}
.dan1 {
position: absolute;
width: 500px;
height: 500px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.993);
top: 50%;
left: 50%;
margin-top: -250px;
margin-left: -250px;
animation: mm 10s infinite linear;
}
.dan2 {
position: absolute;
width: 700px;
height: 700px;
border-radius:50%;
border: 2px solid rgb(255, 255, 255);
top: 50%;
left: 50%;
margin-top: -350px;
margin-left: -350px;
animation: nn 10s infinite linear;
}
.dan2::after {
position: absolute;
content: '';
width: 50px;
height: 50px;
border-radius: 50%;
background-color: aqua;
top: 50%;
left: -25px;
}
.dan1::after {
position: absolute;
content: '';
width: 30px;
height: 30px;
border-radius: 50%;
background-color: aqua;
top: 50%;
left: -15px;
}
@keyframes nn {
to {
transform:rotate(360deg);
}
}
@keyframes mm {
to {
transform:rotate(-360deg);
}
}
@keyframes bb {
to {
transform:rotatez(-360deg);
}
}
@keyframes vv {
to {
transform:rotate(-360deg);
}
}
@keyframes cc {
to {
transform:rotate(360deg);
}
}
</style>
</head>
<body>
<div class="dandan">
<div class="box"></div>
<div class="dan">
<div class="dan3">
<div class="dan4"></div>
</div>
</div>
<div class="dan1"></div>
<div class="dan2"></div>
</div>
</body>
</html>
