css缓冲特效

<style>
.preview{
        background-color: rgba(0, 0, 0, 0);
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
    .loading {
        position: relative;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #faf;
        animation: rotate 2s linear infinite;
    }
    .loading::before {
        content: "";
        position: absolute;
        top: 5px;
        right: 5px;
        bottom: 5px;
        left: 5px;
        border-radius: 50%;
        /* transparent透明 */
        border: 3px solid transparent;
        border-top-color: #fcc;
        animation: rotate 3s linear infinite;
    }
    .loading::after {
        content: "";
        position: absolute;
        top: 15px;
        right: 15px;
        bottom: 15px;
        left: 15px;
        border-radius: 50%;
        /* transparent透明 */
        border: 3px solid transparent;
        border-top-color: #fcf;
        /* linear匀速 infinite持续 */
        animation: rotate 1.5s linear infinite;
    }
    @keyframes rotate {
        0% {
            transform: rotate(0);
        }
        100% {
            transform: rotate(360deg);
        }
    }
</style>
<div class="loading">  </div>