Use SVG and CSS3 to achieve a cool border animation

Today we'll explore a subtle and interesting animation effect on Carl Philipe Brenner's website. When the mouse passes through the grid element, a subtle animation occurs-the grid element becomes transparent, each side has a clockwise animation, creating a very good effect. This effect is done by using JS to animate the width or height of the span label. We'll do this 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 toward 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 and see that the width of the white edges continues to extend from the right to the left, while a slightly delayed edge moves along with it. This is done on every side of the line. It looks like the top edge is moved to the left by the corner, and so on.

This effect can be done without SVG, even with pseudo elements. But we want to explore how to control SVG using CSS rather than JavaScript.

Now, think about how you can create such an effect. We can change the troke-dashoffset of the rectangle or draw the line directly. We try to use JavaScript-free solutions. We found that CSS transition stroke-dashoffset and Stroke-dasharray values trigger a number of bugs. So we're going to try 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're going to use is that they will have three states in this animation. They are three times times the length of the side box, wherein the middle section is the gap between the sides and the length. We will implement the side of the square box by setting the value of the Stroke-dashoffset. Now, the key to this animation is the position conversion of the line:

SVG is the same size as the square box and will not see the part that goes beyond the dotted line.

Let's finish the first line first:

CSS Code copy content to clipboard

1. <div>
2. <svg Width= " height" = ">"
3. <line x1="0" y1="0" x2=" " y2= "0" />
4. </svg>
5. </div>

This div is 20px long and is as SVG. Set the SVG location to absolute with a line width of 10,stroke-dasharray 200.

CSS code copy content to clipboard

div {

width:200px;

height:200px;

position:relative;

Overflow:hidden;

Background: #ddd;

}

SVG {

Position:absolute;

top:0;

left:0;

}

SVG line {

Stroke-width:10;

Stroke: #000;

Fill:none;

stroke-dasharray:200;

-webkit-transition:-webkit-transform 6s Ease-out;

Transition:transform 6s Ease-out;

}

Div:hover svg Line {

-webkit-transform:translatex ( -400px);

Transform:translatex ( -400px);

}

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

Then add the remaining three lines to the GIF effect:

We need to achieve the following effects: After the first part of the line is removed from the square box, the last part of the line next to it moves in, which is the illusion of a straight line turning at the corner,

To see 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):

Add a different hover effect to each line:

CSS code copy content to clipboard

Div:hover svg line.top {

-webkit-transform:translatex ( -400px);

Transform:translatex ( -400px);

}

Div:hover svg Line.bottombottom {

-webkit-transform:translatex (400px);

Transform:translatex (400px);

}

Div:hover svg Line.left {

-webkit-transform:translatey (400px);

Transform:translatey (400px);

}

Div:hover svg line.rightright {

-webkit-transform:translatey ( -400px);

Transform:translatey ( -400px);

}

Look at the effect now.

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

CSS code copy content to clipboard

　　

　　

　　

　　

D

2012

Broccoli, asparagus, Curry

　　

In order to achieve the effect of Carl Philipe Brenner's website, we also add color transition effect, box shadow, etc.:

CSS code copy content to clipboard

. 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:

CSS code copy content to clipboard

. Box H3 {

font-family: "Ruthie", cursive;

font-size:180px;

line-height:370px;

margin:0;

font-weight:400;

width:100%;

}

. Box span {

Display:block;

font-weight:400;

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;

}

Add styles to SVG and lines:

CSS code copy content to clipboard

. Box SVG {

Position:absolute;

top:0;

left:0;

}

. Box SVG Line {

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:

CSS code copy content to clipboard

. Box:hover svg Line {

-webkit-transition-delay:0.1s;

Transition-delay:0.1s;

}

The Stroke-dasharray we have previously defined has only one value, but it is now modified by the size change

CSS code copy content to clipboard

. Box SVG Line.top,

. Box svg Line.bottombottom {

STROKE-DASHARRAY:330 240;

}

. Box SVG Line.left,

. Box svg Line.rightright {

stroke-dasharray:490 400;

}

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

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

CSS code copy content to clipboard

. box:hover svg Line.top {

-webkit-transform:translatex ( -600px);

Transform:translatex ( -600px);

}

. box:hover svg Line.bottombottom {

-webkit-transform:translatex (600px);

Transform:translatex (600px);

}

. box:hover svg Line.left {

-webkit-transform:translatey (920px);

Transform:translatey (920px);

}

. box:hover svg Line.rightright {

-webkit-transform:translatey ( -920px);

Transform:translatey ( -920px);

}

You are done. Hope to be able to inspire your creativity through these effects, achieve more effect ~