我在css中创建了一个微调框,并且将它放置在没有动画的中心,但是当我开始动画时,我的旋转框移开。具体当我使用“@keyframes微调”规则。
我如何保持中心位置?旋转时它的旋转中心位置如何 - CSS动画
.spinner-animation{
width: 500px;
height: 500px;
position: relative;
background: gray;
}
.spinner-animation > .spinner{
width: 400px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
border-radius: 50%;
box-shadow: inset 3px 3px 3px red;
animation: spinner 1.2s linear infinite;
}
.spinner-animation > .content{
display: inline-block;
width: 300px;
height: 300px;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: black;
text-align: center;
line-height: 300px;
color: white;
}
@keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="spinner-animation">
<span class="spinner"></span>
<div class="content">Loading...</div>
</div>
谢谢大家对你的答案。 – DeveloperBeginner