- Navios
- 5 de setembro de 2026 às 19:05 UTC
- Autor
- Kamo
- Enviar
- 70d068c
Um gradiente cônico centrado no painel, girado uma vez por período -- glimmer, pintado duas vezes: uma varredura preenchendo o espaço de 15px, e uma borda de 2px na própria borda do painel. A a borda é a metade que a vende — um brilho só na abertura lê como fundo efeito, enquanto uma borda pegando a luz como a varredura passa lê como um iluminado objeto, e os cantos arredondados do painel iluminando por sua vez é todo o truque. As paradas são um brilho especular em vez de um brilho: uma faixa de sombra, uma subida difícil através de frio em um núcleo soprado alguns graus de largura, uma queda rápida através quente, e depois sombra outra vez. A sombra não é decoração. Branco em uma lacuna #cdcdcd tem quase nenhum headroom para ler como um destaque por conta própria, por isso o contraste tem de ser construído escurecendo o que envolve o núcleo; o primeiro corte não tinha nenhum e lido como uma lavagem em vez de um brilho. Escrito como uma rotação, não como um ângulo animado. A implementação óbvia anima uma propriedade registada <angle> personalizada em `cónico-gradiente(de ...)`, e isto fez, até que um interleaved A/B contra a mesma página com o brilho removido mostrou o tempo médio de frame indo de 33,3ms para 50-66ms: repinta o gradiente através da caixa inteira do elemento em cada quadro. Rodando e elemento que carrega um gradiente fixo faz com que o raster seja único no compositor reutilizações. As próprias métricas do Chrome não mostram tempo de thread principal adicionado e nenhum layout em tudo, e o custo do frame permanece aqui é rasterização de software — este compósitos de máquina através de SwiftShader, sem GPU para fazê-lo de graça. Droping @property também remove o penhasco de um navegador-suporte no recurso. Onde não é suportado o ângulo não pode interpolar, então a varredura teria Ficou parado em vez de degradar a nada. Cada camada é um invólucro de recorte em torno de um quadrado giratório. O quadrado é dimensionado em vmax porque deve cobrir o seu invólucro em todos os ângulos, o que leva diagonal do wrapper — no máximo duas vezes o eixo do viewport maior. Embaixo preferes-reduced-motion ambos são exibidos: nenhum em vez de congelados, porque um arco brilhante estacionado em um canto lê como uma falha de renderização, não como uma decisão. Verificado em 1440x900 e 390x844 com a animação pausada em horários escolhidos: núcleo atravessa a borda superior e o canto superior direito onde a geometria prevê, a borda mede 2px de branco a 8x de zoom, e o movimento reduzido deixa zero spin animações em execução.