Gerador de borda gradiente animado CSS

Uma borda giratória de arco-íris parece simples até que você realmente tente construir uma em CSS: animar um ângulo dentro de conic-gradient() com uma propriedade personalizada simples não traz nada de útil, porque o navegador não tem ideia de que o valor é um ângulo e não pode interpolar entre 0 graus e 360 graus - ele apenas salta. Este gerador usa a correção real, a API de propriedades e valores CSS: `@property --border-angle { sintaxe: '<angle>'; valor inicial: 0deg; herda: falso; }` informa ao navegador exatamente que tipo de valor a propriedade personalizada contém, que é o que desbloqueia uma interpolação suave e amigável à GPU em uma regra @keyframes.

O anel em si é um pseudoelemento ::before com tamanho maior que a caixa (inserido por menos a largura da borda) com seu plano de fundo definido como `cônico-gradiente(from var(--border-angle), ...)` retornando para a primeira cor para que a varredura não tenha costura visível. Uma máscara então faz o verdadeiro trabalho de modelagem: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;` mantém apenas a diferença em forma de anel entre a caixa de preenchimento e a caixa de conteúdo, descartando o retângulo de gradiente sólido em todos os outros lugares. O `-webkit-mask-composite: xor` mais antigo do Safari executa a operação idêntica e é fornecido junto com a propriedade padrão, de modo que o efeito é renderizado de forma consistente, em vez de falhar silenciosamente em um mecanismo.

O suporte ao raio da borda não é uma reflexão tardia aparafusada no topo - o `border-radius: inherit` do pseudo-elemento significa que qualquer raio que você discar na caixa é carregado automaticamente no anel, de modo que um botão em forma de pílula ou um cartão arredondado obtém uma borda arredondada e brilhante em vez de bordas retas sangrando pelos cantos curvos. Teste ao vivo: arraste o controle deslizante do raio de um retângulo pontiagudo para uma pílula cheia e observe o anel seguir a forma a cada passo, que é o detalhe que separa uma implementação real desta técnica de uma captura de tela falsa.

Todo o resto na página é mapeado diretamente no código gerado: o controle deslizante de largura é a espessura do anel e a inserção/preenchimento do pseudoelemento, o controle deslizante de duração é a duração da animação @keyframes, a chave de direção apenas inverte o sinal do ângulo final do quadro-chave (+360 graus ou -360 graus), e cada parada de cor é uma entrada separada por vírgula dentro da chamada cônica-gradiente(). Tudo funciona no seu navegador sem imagens, sem loop de animação baseado em JavaScript e sem serviços externos – copie o bloco CSS e ele continuará girando onde quer que você o cole.