Even after applying z-index -1 on the ::after the stacking context of the ::after is not the way I want it to be and I have watched and researched a lot and still am unable to solve this issue I have read a lot of answers here but still no help
<style>
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);
}
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
</html>
You need to sign in to view this answers
Leave feedback about this