Effect of skirting a div’s edge, as if drawing "by hand"

Question

I want to make an edge effect, that in the Hover of a square div, the edge is "drawn", comes out of the top left of the div, fills up to the top right, goes down doing the right side, returns to the left by the bottom, and goes up, completing the square (as if drawing the edge with a pen).

Can be with svg or with pure css3.

I hope I’ve been clear, any questions ask me! Thanks in advance.

Answer 1

Using transitions with delay, you can do. See an example:

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>

Basically we created two pseudoelements, the ::before with the upper right, and the ::after with the lower left.

We use absolute position in pseudoelements and display: block to ensure that the element occupies the entire area of the Parent, relative position to limit the area of pseudoelements.

The z-index:5 causes edge elements to always appear above the main element, and the pointer-events:none prevents them from "stealing" the mouse click of the main element.

As the edges would appear in the corners before animation, we used the opacity to hide them until the right moment.

Finally, to have the animation drawing and "disdaining" when the mouse leaves the element, we apply transitiondifferent s within the element, and the element:hover.

To change the speed, remember to change all times in the same ratio. The current animation takes 2 seconds. For example, if you want it to last just one second, you have to change it in that ratio:

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.

Just keep the ratio for other speeds.