Como animar borda tracejada com CSS

As bordas decoradas podem adornar qualquer elemento na página, mas as bordas CSS são limitadas quando se trata de estilo. Os desenvolvedores frequentemente criam soluções como bordas de gradiente CSS, bordas SVG, várias bordas e muito mais para imitar e atualizar a aparência das bordas da caixa e suas animações..

Hoje vamos dar uma olhada em um hack mais simples para bordas tracejadas: animação com borda tracejada. A borda tracejada animada será criada usando apenas esboço e Sombra da caixa, deixando sem espalhafatos sobre fallbacks, desde esboço é suportado a partir do IE8 em diante. Dessa forma, o usuário ainda poderá ver as bordas diferentemente de quando o SVG ou gradiente é usado. Com isso você também pode criar traços bicolores. Vamos dar uma olhada.

Criando as fronteiras

Vamos primeiro criar as fronteiras. Para isso, vamos usar um contorno tracejado e uma sombra de caixa.

 .banners contorno: 6px tracejado amarelo; box-shadow: 0 0 0 6px # EA3556;… 

o esboço precisará de todos os seus valores; largura, tipo e cor. o Sombra da caixa só precisa do valor para espalhar que deve ser o mesmo que a largura e a cor do contorno. Tanto o contorno quanto a sombra da caixa juntos criarão o efeito de traços de duas cores.

Você pode então ajustar a largura ou a altura da caixa para sua aparência de borda desejada nos cantos.

Animando as fronteiras

Para nosso primeiro exemplo de animação, adicionaremos animações de quadros-chave CSS a um conjunto de banners com as bordas animando continuamente, ganhando atenção. Para o efeito de animação, vamos simplesmente trocar as cores do contorno e da sombra da caixa.

@keyframes animateBorder para outline-color: # EA3556; box-shadow: 0 0 0 6px amarelo; 

Você pode segmentar a cor do contorno usando cor de contorno propriedade de longhand, no entanto, para box shadow, você terá que dar todos os valores para a propriedade shorthand por enquanto.

Quando a animação estiver pronta, adicione-a à caixa.

.banners contorno: 6px tracejado amarelo; box-shadow: 0 0 0 6px # EA3556; animação: 1s animateBorder infinite;…

Transições nas fronteiras

Para o exemplo de transição, adicionaremos bordas às imagens e animaremos as que estão em foco. Você também pode alterar o tamanho da borda para diferentes efeitos.

.fotos esboço: 20px tracejado # 006DB5; box-shadow: 0px 0px 0px 20px # 3CFDD3; transição: todos os 1s;… .photos: hover outline-color: # 3CFDD3; box-shadow: 0 0 0 20px # 006DB5; 

Agora, passe o mouse sobre essas imagens para ver suas bordas tracejadas de CSS em toda a sua glória animada.

E isso é um envoltório. Você pode tentar substituir as fronteiras tracejadas pelas pontilhadas, mas o efeito pode não ser tão bom. Você também pode alterar o tipo de contorno durante a animação para mais alguns efeitos.