I want to make a border effect, which in the hover of a square div, the border is "drawn", leaves the top left of the div, fills to the upper right, descends to the right side, returns to the left through (as if you were drawing the border with a pen).
It can be with svg or with pure css3.
I hope to have been clear, any questions ask me! Thank you in advance.
Using transitions with delay , you can do it. Here's 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 have basically created two pseudo-elements, ::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 whole area of parent , which has relative position, to limit the area of pseudoelements.
z-index:5 causes elements with borders to always appear above the parent, and pointer-events:none prevents them from "stealing" the mouse click from the parent.
As the borders would appear in the corners before the animation, we used opacity to hide them until the right time.
Finally, to have the animation drawing and "disengaging" at the time the mouse exits the element, we apply transition s within the element, and the element :hover .
To change the speed, be sure to change all times in the same ratio. The current animation takes 2 seconds. For example, if you want a single second to last, 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.