极客观点
项目管理
HarmonyOS
帮忙看下这个代码，主要问题在于load-box里，我用绝对定位后left与translateX结合让这个盒子在父盒子水平居中，这个动画的效果应该使这个盒子自己转一圈，看倒的效果就是没有变化，但实际上使load-box这个子盒子移动了，是因为转换中心改变了吗，这是为什么
<style>
.load {
position: relative;
width: 250px;
height: 250px;
background-color: rgba(0, 0, 0, .25);
border-radius: 125px;
margin: 50px auto;
}
.load-box {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 100px;
background-color: pink;
border-radius: 50px;
animation: circle-rotate 1s linear forwards;
}
@keyframes circle-rotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
</style>
<body>
<div class="load">
<div class="load-box"></div>
<div class="load-box"></div>
<div class="load-box"></div>
<div class="load-box"></div>
<div class="load-box"></div>
<div class="load-box"></div>
<div class="load-box"></div>
<div class="load-box"></div>
</div>我试了下问题出在translateX上，注释掉translateX这个盒子就是本身旋转360度，但加上就不是了
当
circle-rotate中的transform生效的时候，.load-box中的transform就被覆盖了。