style.css

body{
    background: #666666;
    margin: 0%;
    padding: 0;
}


.cover{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    animation-direction: reverse;

}


.outer{
    background: linear-gradient(90deg, black 50%, #f0f8ff 50%);
    position: absolute;
    top: 50%;
    border-radius: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    transform: translate(-50%,-50%);
    animation: move 10s linear infinite;
    box-shadow:  11px -11px 22px #292929,
        -11px 11px 22px #a3a3a3;
}


.yin-yang,.yin-yang2{
    position: relative;
    top: 75px;
    left: 50%;
    height: 50px;
    border-radius: 50%;
    width: 50px;
    background: linear-gradient(90deg, rgb(0, 0, 0) 50%, #f0f8ff 50%);
    border: 50px solid ;
    border-color: black #f0f8ff #f0f8ff black;
    transform: translate(-50%,-50%);
    display: flex;
    flex-direction: column;
    animation: move 6s linear infinite;
}


.yin-yang2{
    border: 50px solid ;
    background: linear-gradient(90deg, rgb(0, 0, 0) 50%, #f0f8ff 50%);
    animation: move 6s linear infinite;
    border-color: black #f0f8ff #f0f8ff black;
}


.yin-yang::after{
    content: '';
    position: absolute;
    top: 55px;
    left: 3px;
    height: 36px;
    width: 36px;
    border-radius: 50%;
    z-index: 1;
    background-color: black;
    border: 20px solid aliceblue;
    animation: move 6s linear infinite;
}


.yin-yang::before{
    content: '';
    position: absolute;
    top: -10%;
    left: 96%;
    z-index: 1;
    border-radius: 50%;
    height: 36px;
    width: 36px;
    background-color: #ffffff;
    border: 20px solid #000000;
    animation: move 6s linear infinite;
}


.yin-yang2::after{
    content: '';
    position: absolute;
    top: 55px;
    left: 3px;
    height: 37px;
    width: 37px;
    border-radius: 50%;
    z-index: 1;
    background-color: black;
    border: 20px solid #f0f8ff;
    animation: move 6s linear infinite;
}


.yin-yang2::before{
    content: '';
    position: absolute;
    top: -7%;
    left: 100%;
    z-index: 1;
    border-radius: 50%;
    height: 35px;
    width: 35px;
    background-color: rgb(255, 255, 255);
    border: 20px solid rgb(0, 0, 0);
    animation: move 6s linear infinite;
}


@keyframes move {
    from{
        transform: translate(-50%,-50%) rotate(-360deg);
    }
    to{
        transform: translate(-50%,-50%) rotate(0deg);
    }    
}