文字锥形渐变

锥形渐变 conic-gradient

应用场景：倒计时刷新按钮

初始css

background-image: conic-gradient(from 0deg, red 0deg, #000 0deg);
background-clip: text;
-webkit-background-clip: text;

动画效果less

.refresh(@n, @m) when (@m =< 1) {
    @{n} {
        background-image: conic-gradient(from 0deg, red 360deg * @m, #000 0deg);
    }
    .refresh(@n+2, @m + 0.02);
}

@keyframes refresh-card {
    .refresh(0%, 0);
}
.countdown {
    animation: 5s refresh-card linear infinite;
}

效果：

代码