css动画：多个⾏星围绕中⼼恒星旋转最近练习css动画。写两种“多个⾏星围绕中⼼恒星旋转”
⼀种是中间恒星旋转，直接上代码
<div class="center">
<div class="box1">
<view class="box1_child">我是</view>
</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
</div>
<style>
@keyframes center_turn{
0%{transform: rotate(0deg)}
100%{transform: rotate(360deg)}
}
@keyframes turn1{
0%{transform: rotate(360deg)}
100%{transform: rotate(0deg)}
}
@keyframes turn2{
0%{transform: rotate(360deg)}
100%{transform: rotate(0deg)}
}
@keyframes turn3{
0%{transform: rotate(360deg)}
100%{transform: rotate(0deg)}
}
@keyframes turn4{
0%{transform: rotate(360deg)}
100%{transform: rotate(0deg)}
}
div{
border-radius: 50%;
}
.center{
height: 200px;
width: 200px;
margin: 200px;
background-color: red;
position: relative;
animation:center_turn 30s linear 0s infinite normal;
}
.center div{
width: 100px;
height: 100px;
}
.box1{
position: absolute;
top: -100px;
left: 50px;
animation-name:turn1;
animation-timing-function: linear;
animation-duration: 30s;
animation-iteration-count: infinite;
background-color: green;
display: flex;
align-items: center;
justify-content: center;
justify-content: center;
.box1_child{
color: #ff0000;
}
}
.box2{
position: absolute;
top: 50px;
left: -100px;
animation-name:turn2;
animation-timing-function: linear;
animation-duration: 30s;
animation-iteration-count: infinite;
background-color: navy;
}
.box3{
position: absolute;
top: 50px;
left: 200px;
animation-name:turn3;
animation-timing-function: linear;
animation-duration: 30s;
animation-iteration-count: infinite;
background-color: sandybrown;
}
.box4{
position: absolute;
top: 200px;
left: 50px;
animation-name:turn4;
animation-timing-function: linear;
animation-duration: 30s;
animation-iteration-count: infinite;
background-color: pink;
}
</style>
另⼀种是中⼼恒星静⽌不动，⾏星跳动，形成类似围绕旋转效果
<div class="center">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<style>
@keyframes turn1{
0%{transform: translate(0,0)}
50%{transform: translate(-150px,0)}
100%{transform: translate(-150px,150px)}
}
@keyframes turn2{
0%{transform: translate(0,0)}
50%{transform: translate(0,150px)}
100%{transform: translate(150px,150px)}
}
@keyframes turn3{
0%{transform: translate(0,0)}
50%{transform: translate(0,-150px)}
100%{transform: translate(-150px,-150px)}
}
@keyframes turn4{
0%{transform: translate(0,0)}
0%{transform: translate(0,0)}
50%{transform: translate(150px,0)}
100%{transform: translate(150px,-150px)} }
div{
border-radius: 50%;
}
.center{
height: 200px;
width: 200px;
margin: 200px;
background-color: red;
position: relative;
}
.center div{
width: 100px;
height: 100px;
}
.box1{
position: absolute;
top: -100px;
left: 50px;
animation-name:turn1;
animation-timing-function: linear;
animation-duration: 2s;
animation-iteration-count: infinite;
background-color: green;
}
.box2{
position: absolute;
top: 50px;
left: -100px;
animation-name:turn2;
animation-timing-function: linear;
animation-duration: 2s;
animation-iteration-count: infinite;
background-color: navy;
}
.box3{
position: absolute;
top: 50px;
left: 200px;
animation-name:turn3;
animation-timing-function: linear;
animation-duration: 2s;css设置表格滚动条
animation-iteration-count: infinite;
background-color: sandybrown;
}
.
box4{
position: absolute;
top: 200px;
left: 50px;
animation-name:turn4;
animation-timing-function: linear;
animation-duration: 2s;
animation-iteration-count: infinite;
background-color: pink;
}
</style>
下⾯是第⼀种⽅式的效果，第⼆种类似的。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。