Question

我尝试在我的网页上制作一个旋转圆圈加载图标，如下所示：

CSS：

@keyframes spin {
    0% {transform: rotate(0deg); }
    100% {transform: rotate(360deg); }
}

div#spinningCircleBox {
    width: 6.25vw;
    height: 6.25vw;
    position: fixed;
    background-color: rgba(255, 255, 255, 0);
    left: 50vw;
    top: 50vh;
    transform: translateX(-50%) translateY(-50%);
    box-sizing: border-box;
    animation: spin 1s infinite linear;
    border: solid 1px red;
}

div#circleBlockMask {
    width: 3.125vw;
    height: 3.125vw;
    position: fixed;
    box-sizing: border-box;
    left: 0;
    top: 0;
    overflow: hidden;
}

div#spinningCircle {
    width: 6.25vw;
    height: 6.25vw;
    position: relative;
    border: solid 8px aliceblue;
    background-color: rgba(255, 255, 255, 0);
    border-radius: 10vw;
    box-sizing: border-box;
    left: 0;
    top: 0;
}

div#circleWrapper {
    width: 6.5vw;
    height: 6.5vw;
    box-sizing: border-box;
    border: solid 12px white;
    border-radius: 10vw;
    left: 50vw;
    top: 50vh; 
    position: fixed;
    transform: translateX(-50%) translateY(-50%);
    border: solid 1px yellow;

}

HTML：

<body>
[...]
<div id="spinningCircleBox">
        <!--div id="circleBlockMask">
            <div id="spinningCircle"></div>
        </div-->
    </div>
<div id="circleWrapper"></div>
[...]
</body>

但是发生的事情是动画有效，但“移动”'spinningCircleBox'。我附上了截图：

你可以看到黄色的盒子（我称之为“circleWrapper”，它只是用于显示差异）在中间正确对齐，垂直和水平居中。
如果我禁用了spinningCircleBox的旋转动画，它也正确对齐，但由于某种原因（这是我的问题），启用动画后，容器（“spinningCircleBox”）不会放在中间。

你可以帮帮我吗？

Answer 1

这种情况正在发生，因为动画正在覆盖

transform: translateX(-50%) translateY(-50%);

来自你的元素，修复它也添加到动画......

＆＃13;

body{
  background:blue;
}
@keyframes spin {
    0% {transform: translateX(-50%) translateY(-50%) rotate(0deg) }
    100% {transform: translateX(-50%) translateY(-50%) rotate(360deg)}
}

div#spinningCircleBox {
    width: 6.25vw;
    height: 6.25vw;
    position: fixed;
    background-color: rgba(255, 255, 255, 0);
    left: 50vw;
    top: 50vh;
    transform: translateX(-50%) translateY(-50%);
    box-sizing: border-box;
    animation: spin 1s infinite linear;
    border: solid 1px red;
}

div#circleBlockMask {
    width: 3.125vw;
    height: 3.125vw;
    position: fixed;
    box-sizing: border-box;
    left: 0;
    top: 0;
    overflow: hidden;
}

div#spinningCircle {
    width: 6.25vw;
    height: 6.25vw;
    position: relative;
    border: solid 8px aliceblue;
    background-color: rgba(255, 255, 255, 0);
    border-radius: 10vw;
    box-sizing: border-box;
    left: 0;
    top: 0;
}

div#circleWrapper {
    width: 6.5vw;
    height: 6.5vw;
    box-sizing: border-box;
    border: solid 12px white;
    border-radius: 10vw;
    left: 50vw;
    top: 50vh; 
    position: fixed;
    transform: translateX(-50%) translateY(-50%);
    border: solid 1px yellow;

}

＆＃13;

<div id="spinningCircleBox">
        <!--div id="circleBlockMask">
            <div id="spinningCircle"></div>
        </div-->
    </div>
<div id="circleWrapper"></div>

＆＃13;

为什么旋转动画会影响容器的位置？

1 个答案: