SOURCE

console 命令行工具 X clear

                    
>
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;
    /* transition: 1s; */
     animation: rotate1 2s forwards infinite;
     border-radius: 100px ;

}
.two {
    position: absolute;
    width: 0;
    height: 0;
    border: 100px solid transparent;
    border-bottom: 100px solid lightblue;
    /* transition: 1s; */
     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);
    }
}