所以我想试着用纯css制作一艘宇宙飞船，并try 添加一些细节.我在飞船的主体上加了4个点，我想要给它一个旋转的效果.由于这是一个2D模型，我们将只能看到从前面旋转，就像字幕标签.我添加了关键帧，但它不平滑.当动画时间停止时，它会突然剪切动画.我怎么才能让它看起来像是不停地旋转呢？以下是代码:
<div class="spaceship">
<div class="glass">
<div class="bottom">
<div class="point1"></div>
<div class="point2"></div>
<div class="point3"></div>
<div class="point4"></div>
</div>
</div>
</div>
和css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #333;
}
.spaceship {
position: absolute;
height: 200px;
aspect-ratio: 1;
}
.spaceship .glass {
height: 100px;
aspect-ratio: 1;
/* background: red; */
background: rgba(255, 255, 255, 0.19);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(6.8px);
-webkit-backdrop-filter: blur(6.8px);
border-radius: 50%;
}
.spaceship .bottom {
position: absolute;
height: 30px;
width: 100px;
/* background: red; */
border-radius: 20px;
background-image: linear-gradient(
to right,
#af2323,
#b5242e,
#bb2739,
#c02a44,
#c42e4f
);
bottom: 0px;
display: flex;
justify-content: center;
align-items: center;
/* flex-direction:space-between; */
gap: 10px;
overflow-x: hidden;
}
.point1,
.point2,
.point3,
.point4 {
height: 20px;
aspect-ratio: 1;
background: #fff;
border-radius: 50%;
animation: move 4s linear infinite;
}
@keyframes move {
0% {
translate: 100% 0%;
}
100% {
translate: 0% 0%;
}
}<div class="spaceship">
<div class="glass">
<div class="bottom">
<div class="point1"></div>
<div class="point2"></div>
<div class="point3"></div>
<div class="point4"></div>
</div>
</div>
</div>