console
// var one=document.querySelector(".one");
// var two=document.querySelector(".two");
// window.addEventListener("load",function() {
// // one.style.backgroundColor="pink";
// let i=1;
// setInterval(function(){
// i++;
// one.style.transform="rotate("+i*180+"deg)";
// },2000)
// let j=0;
// setTimeout(function() {
// setInterval(function(){
// j++;
// two.style.transform="rotate("+i*180+"deg)";
// },2000)
// },1000)
// })
<div class="one"></div>
<div class="two"></div>
.one {
position: absolute;
width: 0;
height: 0;
border: 100px solid transparent;
border-left: 100px solid lightblue;
animation: rotate1 2s forwards infinite;
border-radius: 100px ;
}
.two {
position: absolute;
width: 0;
height: 0;
border: 100px solid transparent;
border-bottom: 100px solid lightblue;
animation: rotate 2s forwards infinite;
border-radius: 100px ;
}
.rotate {
animation: rotate .5s forwards infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes rotate1 {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}