I've been working on creating an animation, and I'm almost finished with it. The issue I'm encountering is that the horizontal and vertical scrollbars are refusing to disappear. I attempted adding the overflow:hidden property to the parent div (.box), but unfortunately, I have not been successful in hiding them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
overflow: hidden;
}
.rotor1 {
height: 100vw;
background: rgb(152, 227, 250);
animation: 9.2s keepRotating infinite ease-in-out;
z-index: 3;
}
.rotor2 {
height: 102vw;
background: rgb(204, 238, 248);
border-radius: 30%;
animation: 9.05s keepRotating infinite ease-in-out;
animation-timing-function: linear;
}
.rotor1,
.rotor2 {
width: 110vw;
position: absolute;
top: -78vw;
border-radius: 30%;
animation-timing-function: linear;
}
@keyframes keepRotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="rotor1"></div>
<div class="rotor2"></div>
</div>
</body>
</html>Does anyone know of a method to hide both the horizontal and vertical scrollbars effectively?