Use SVG and CSS3 to achieve interesting border animations

Original address

Let's explore a subtle and interesting animated effect on Carl Philipe Brenner's website today. When the mouse passes through the grid element, a subtle animation occurs-the mesh element becomes transparent, and each side has a clockwise animation, creating a very good effect. The effect is to span animate the width or height of the label via JS. We'll do it later with SVG and CSS gradients. Note that this technique is still experimental.

First, let's take a look at the basic concepts and then we'll work in that direction.

Please note that we will use CSS transitions on SVG and may not be supported by all browsers.

At first glance, you may not understand how this effect is done. Let's take a closer look at the edges above and we'll see that the width of the white edges extends from the right to the left, while a slightly delayed edge moves along. Every side has this kind of practice. It looks like the top edge moves to the left, and so on, through the corner.

This can be done without SVG, even with pseudo-elements. But we want to explore how to use CSS instead of JavaScript to control SVG.

Now, think about how you can create such an effect. We can change the rectangle troke-dashoffset or draw the line directly. We try to use a solution without JavaScript. We found that CSS transitions stroke-dashoffset and stroke-dasharray values trigger a lot of bugs. So we're going to try out different solutions, using lines and their animations, which are easy to understand and implement in CSS. This also gives us more opportunities to explore different animation effects.

The special feature of the lines we are going to use is that they will have three states in this animation. They are three times times the length of the side of the side box, where the middle section is a gap equal to the edge. We will achieve the stroke-dashoffset same length as the side of the square box by setting the value. Now, the key to this animation implementation is the position transformation of the line:

SVG is the same size as the square box, so you don't see the part that goes beyond the dashed line.

Let's finish the first line first:

<Div>    <svgwidth= "$"Height= "$">        < LineX1= "0"Y1= "0"X2= "All"y2= "0" />    </svg></Div>

This div is 20px wide, just like SVG. The SVG position is set absolute to a line width stroke-dasharray of 200.

Div{width:200px;Height:200px;position:relative;Overflow:Hidden;background:#ddd;}svg{position:Absolute;Top:0; Left:0;}svg Line{Stroke-width:Ten;Stroke:#000;Fill:None;Stroke-dasharray: $;-webkit-transition:-webkit-transform. 6s Ease-out;transition:transform. 6s Ease-out;}Div:hover svg Line{-webkit-transform:TranslateX ( -400px);Transform:TranslateX ( -400px);}

The line also has a transition when the number of mouse hovers over the Div. We're going to move the line to its two-thirds, so to move to the -400px on the x-axis, you can look at the effect. Because translation can not be used here as a percentage of units, so with PX.

Then add the remaining three lines, GIF effect:

We need to achieve the following effect: The first part of the line moves out of the box, and the last part of the line next to it moves in, which will pass in the illusion of a straight line turning at the corner,

Take a look at the definition of the coordinate system:

The coordinates of the left line are (0,200) to (0,-400), the bottom is (200,200) to (-400,200), right One (200,0) to (200,600):

<Div>    <svgwidth= "$"Height= "$">        < Lineclass= "Top"X1= "0"Y1= "0"X2= "All"y2= "0"/>        < Lineclass= "Left"X1= "0"Y1= "$"X2= "0"y2= " -400"/>        < Lineclass= "Bottom"X1= "$"Y1= "$"X2= " -400"y2= "$"/>        < Lineclass= "Right"X1= "$"Y1= "0"X2= "$"y2= "All"/>    </svg></Div>

Add a hover different effect to each line:

div:hover svg line.top{-webkit-transform:TranslateX ( -400px);Transform:TranslateX ( -400px);}div:hover svg line.bottom{-webkit-transform:TranslateX (400px);Transform:TranslateX (400px);}div:hover svg line.left{-webkit-transform:Translatey (400px);Transform:Translatey (400px);}div:hover svg line.right{-webkit-transform:Translatey ( -400px);Transform:Translatey ( -400px);}

Look at the effect now.

Now change the box size to 460 x and add some content to it:

<Divclass= "box">    <svgxmlns= "Http://www.w3.org/2000/svg"width= "100%"Height= "100%">        < Lineclass= "Top"X1= "0"Y1= "0"X2= "The "y2= "0"/>        < Lineclass= "Left"X1= "0"Y1= "460"X2= "0"y2= " -920"/>        < Lineclass= "Bottom"X1= "+"Y1= "460"X2= " -600"y2= "460"/>        < Lineclass= "Right"X1= "+"Y1= "0"X2= "+"y2= "1380"/>    </svg>    <H3>D</H3>    <span>2012</span>    <span>Broccoli, asparagus, Curry</span></Div>

To achieve the effect of Carl Philipe Brenner's website, we also add color transitions, box shadows, and so on:

. Box{width:300px;Height:460px;position:relative;background:Rgba (255,255,255,1);Display:Inline-block;margin:0 10px;cursor:Pointer;Color:#2c3e50;Box-shadow:inset 0 0 0 3px #2c3e50;-webkit-transition:background 0.4s 0.5s;transition:background 0.4s 0.5s;}. Box:hover{background:Rgba (255,255,255,0);-webkit-transition-delay:0s;Transition-delay:0s;}

Add Style to text:

. Box H3{font-family:"Ruthie", cursive;font-size:180px;Line-height:370px;margin:0;Font-weight: -;width:100%;}. Box span{Display:Block;Font-weight: -;Text-transform:Uppercase;letter-spacing:1px;font-size:13px;padding:5px;}. Box H3,.box span{-webkit-transition:Color 0.4s 0.5s;transition:Color 0.4s 0.5s;}. Box:hover H3,.box:hover span{Color:#fff;-webkit-transition-delay:0s;Transition-delay:0s;}

To add a style to SVG and lines:

{    position: absolute;     top: 0;     Left: 0;}  {    stroke-width: 3;     Stroke: #ecf0f1;     fill: none;     -webkit-transition: All . 8s Ease-in-out;     transition: All . 8s Ease-in-out;}

The transition to the line plus the delay:

{    -webkit-transition-delay: 0.1s;     transition-delay: 0.1s;}

We've defined only stroke-dasharray one value before, but now we're going to change the size.

{    stroke-dasharray: ;  {    stroke-dasharray: 490;}

If you try these values, you can see the different display of the lines.

Finally, we want a hover transition to set the corresponding value. Since the element is now 300px wide, the horizontal line is changed to 900px, and the vertical bar changes in the same way:

. Box:hover svg line.top{-webkit-transform:TranslateX ( -600px);Transform:TranslateX ( -600px);}. Box:hover svg line.bottom{-webkit-transform:TranslateX (600px);Transform:TranslateX (600px);}. Box:hover svg line.left{-webkit-transform:Translatey (920px);Transform:Translatey (920px);}. Box:hover svg line.right{-webkit-transform:Translatey ( -920px);Transform:Translatey ( -920px);}

Done. Hope to inspire your creativity with these effects and achieve more results.

Demo | Download

(go) Use SVG and CSS3 to achieve interesting border animations