spin.acss

.cirqueBox {
    position: relative;
    width: 186rpx;
    height: 186rpx;
    border-radius: 50%;
    -webkit-mask: radial-gradient(transparent, transparent 83rpx, #000 0);
    mask: radial-gradient(transparent 83rpx, #000 0);
}

.cirque2 {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #0e7afa;
    z-index: 1;
}

.cirque1 {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #aaa;
    z-index: 2;
    animation: mymove 1.5s linear infinite;
}

@keyframes mymove {
    0% {
        clip-path: polygon(93rpx 93rpx, 93rpx -207rpx, -207rpx 93rpx, 93rpx 393rpx, 393rpx 93rpx, 93rpx -207rpx);
    }
    25% {
        clip-path: polygon(93rpx 93rpx, 93rpx -207rpx, -207rpx 93rpx, 93rpx 393rpx, 393rpx 93rpx, 393rpx 93rpx);
    }
    50% {
        clip-path: polygon(93rpx 93rpx, 93rpx -207rpx, -207rpx 93rpx, 93rpx 393rpx, 93rpx 393rpx, 93rpx 393rpx);
    }
    75% {
        clip-path: polygon(93rpx 93rpx, 93rpx -207rpx, -207rpx 93rpx, -207rpx 93rpx, -207rpx 93rpx, -207rpx 93rpx);
    }
    100% {
        clip-path: polygon(93rpx 93rpx, 93rpx -207rpx, 93rpx -207rpx, 93rpx -207rpx, 93rpx -207rpx, 93rpx -207rpx);
    }
}