即使在 ::after 上应用 z-index -1 之后，::after 的堆叠上下文也不是我想要的方式，我已经观察和研究了很多，但仍然无法解决我已阅读的这个问题这里有很多答案，但仍然没有帮助
body {
height: 97vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
background-color: red;
width: 400px;
height: 400px;
animation-name: spinner;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
position: relative;
border-radius: 50%;
}
.container::after {
content: "";
background-color: blue;
height: 220px;
width: 220px;
border-radius: 200px 0 0 0;
transform: rotate(6deg);
position: absolute;
top: -30px;
z-index: -1;
}
@keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}<div class="container">
</div>您可以在容器周围添加一个包装器，在包装器上使用 ::after 并将其设置为带有 z-index 的容器后面。
body {
height: 97vh;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
animation-name: spinner;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
position: relative;
}
.container {
background-color: red;
width: 400px;
height: 400px;
position: relative;
border-radius: 50%;
}
.wrapper::after {
content: "";
background-color: blue;
height: 220px;
width: 220px;
border-radius: 200px 0 0 0;
transform: rotate(6deg);
position: absolute;
top: -30px;
z-index: -1;
}
@keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<body>
<div class="wrapper">
<div class="container"></div>
</div>
</body>