5

Quero fazer um efeito de borda, que no hover de uma div quadrada, a borda é "desenhada", sai da parte superior esquerda da div, preenche até a superior direita, desce fazendo a lateral direita, retorna para a esquerda pela inferior, e sobe, completando o quadrado (como se estivesse desenhando a borda com uma caneta).

Pode ser com svg ou com puro css3.

Espero ter sido claro, qualquer dúvida me perguntem! Obrigado desde já.

0

1 Resposta 1

11

Usando transições com delay, dá pra fazer. Veja um exemplo:

a { display:block; position:relative; background:#ffc; width:300px; height:180px }

a::before, a::after { content:""; display:block; box-sizing:border-box;
                      position:absolute;z-index:5; pointer-events: none; 
                      width:0; height:0; opacity:0; border:2px solid red }

a::before { border-left:none; border-bottom:none; left:0; top:0;
            transition:width .5s linear 1.5s, height .5s linear 1s, opacity .1s 2s }
a::after  { border-top:none; border-right:none; right:0; bottom:0;
            transition:width .5s linear .5s, height .5s linear, opacity .1s 1s }

a:hover::before, a:hover::after  { width:100%; height:100%; opacity:1 }

a:hover::before { transition:width .5s linear, height .5s linear .5s, opacity .1s }
a:hover::after  { transition:width .5s linear 1s, height .5s linear 1.5s, opacity .1s 1s }
<a>Ponha o ponteiro do mouse aqui</a>

Basicamente criamos dois pseudoelementos, o ::before com a parte superior direita, e o ::after com a parte inferior esquerda.

Usamos posição absoluta nos pseudoelementos e display: block para garantirmos que o elemento ocupe a área toda do parent, que tem posição relativa, para limitar a área dos pseudoelementos.

O z-index:5 faz com que os elementos com borda apareçam sempre por cima do elemento principal, e o pointer-events:none evita que eles "roubem" o clique do mouse do elemento principal.

Como as bordas ficariam aparecendo nos cantos antes da animação, usamos o opacity para escondê-las até o momento certo.

Finalmente, para termos a animação desenhando e "desdesenhando" na hora que o mouse sai do elemento, aplicamos transitions diferentes dentro do elemento, e do elemento:hover.

Para alterar a velocidade, lembre-se de alterar todos os tempos na mesma proporção. A animação atual leva 2 segundos. Por exemplo, se quiser que dure um segundo só, tem que trocar nessa proporção:

Tudo que for  .5s por  .25s
               1s por  .5s
             1.5s por  .75s
               2s por  1s

              .1s você pode manter, pois é pra ser "quase instantâneo" mesmo.

Basta manter a proporção para outras velocidades.

5
  • Perfeito, amigo! Muito obrigado e parabéns pela resposta.
    – Tiago P.C
    Commented 4/09/2016 às 20:45
  • @TiagoP.C foi um "quebra cabeças" no começo, até eu imaginar como resolver, mas acho que no fim deu pra fazer um balanço legal entre complexidade e resultado. Espero que seja útil, ao menos como exemplo.
    – Largato
    Commented 4/09/2016 às 20:48
  • Procurei fazer de uma maneira que você possa usar independente do tamanho do elemento, e que aceite espessuras de borda conforme você achar melhor (desde que não seja muito espessa), mas se tiver alguma duvida em algum ajuste extra, comente aqui.
    – Largato
    Commented 4/09/2016 às 20:57
  • Isso é mágica. :)
    – zentrunix
    Commented 4/09/2016 às 21:26
  • Depois vou analisar esse código com calma, ótima solução
    – hugocsl
    Commented 9/12/2018 às 14:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .