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

Question

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

I want to make a border effect, that in the hover of a square div, the border is "drawn", comes out of the top left of the div, fills up to the top right, descends making the right side, returns to the left by the bottom, and rises, completing the Square (as if drawing the border with a pen).

Can be with svg or with pure css3.

I hope I have been clear, any questions ask me! Thank you right now.

5

css3 css-animations

Author: Bacco, 2016-09-04

Source

1 answers

score 8 · Accepted Answer

Using transitions with delay , you can do it. 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>

We basically create two pseudoelements, the ::before with the top right, and the ::after with the bottom left.

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

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

Since the edges would appear in the corners before the animation, we use opacity to hide them until the right time.

Finally, to have the animation drawing and "drawing" at the time the mouse leaves the element, we apply transition Different s inside the element, and the element:hover.

To change the speed, remember to change all times in the same proportion. The current animation takes 2 seconds. For example, if you want it to last a single second, you have to swap in this 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.