CSS实现时钟效果Loading，时钟效果透明

CSS实现时钟效果Loading，时钟背景效果透明

HTML

<div class="clock_inner">
        <span class="hour"></span>
        <span class="minute"></span>
        <span class="second"></span>
        <span class="scale"></span>
</div>

CSS

.clock_inner {
        margin-left: 50vw;
        margin-top: 50vh;
        display: inline-block;
        position: relative;
        height: 80px;
        width: 80px;
        background: transparent;
        --mask-pd-width: 2px;

    }
    .clock_inner::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: calc(100%);
        height: calc(100%);
        padding: var(--mask-pd-width);
        border-radius: 50%;
        background: linear-gradient(to bottom left,
        rgba(255, 216, 64, 1),
        rgba(243, 172, 255, 1),
        rgba(138, 236, 255, 1));
        --mask-bg: linear-gradient(red, red);
        --mask-clip: content-box, padding-box;
        mask-image: var(--mask-bg), var(--mask-bg);
        mask-clip: var(--mask-clip);
        mask-composite: exclude;
        -webkit-mask-composite: destination-out;
    }
    .clock_inner .minute {
        position: absolute;
        top: 50%;
        left: 50%;
        height: 35px;
        width: 5px;
        background-color: rgba(138, 236, 255, 1);
        transform: translateX(-50%);
        transform-origin: 50% var(--mask-pd-width);
        border-radius: 8px;
        animation: clockAnima 2s linear infinite;
    }
    .clock_inner .second {
        position: absolute;
        height: 35px;
        width: 2px;
        top: 50%;
        left: 50%;
        transform-origin: 50% var(--mask-pd-width);
        background-color: rgba(255, 216, 64, 1);
        border-radius: 2px;
        animation: clockAnima 0.5s linear infinite;
    }
    .clock_inner .hour {
        position: absolute;
        top: 50%;
        left: 50%;
        height: 25px;
        transform: translateX(-50%);
        width: 5px;
        border-radius: 2px;
        background: rgba(243, 172, 255, 1);
        transform-origin: 50% var(--mask-pd-width);
        animation: clockAnima 10s linear infinite;
    }
    @keyframes clockAnima {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

;
}
100% {
transform: rotate(360deg);
}
}