Use SVG and CSS3 to achieve cool border animations

This article mainly introduces the use of SVG and CSS3 to achieve a cool border animation, do not use JavaScript to make the writing process a lot easier, the need for friends can refer to the next

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 animate the width or height of the span 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 troke-dashoffset of the rectangle or draw the line directly. We try to use a solution without JavaScript. We found that the values of CSS transitions Stroke-dashoffset and Stroke-dasharray trigger many 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 set the value of the stroke-dashoffset to achieve with the side of the square box length. 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:

<p>       <svg width= "height=" >           <line x1= "0" y1= "0" x2= "all" y2= "0"/>       </svg>   </p>

This p has a width of 20px and is the same as SVG. The SVG location is set to absolute and the line width is 10,stroke-dasharray to 200.

p {       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;   }     P:hover svg line {       -webkit-transform:translatex ( -400px);       Transform:translatex ( -400px);   }

When the number of mouse hovers over p, the line also has a transition. 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):

Add a different hover effect to each line:

P:hover svg line.top {     -webkit-transform:translatex ( -400px);     Transform:translatex ( -400px);   }     P:hover svg line.bottombottom {     -webkit-transform:translatex (400px);     Transform:translatex (400px);   }     P:hover svg line.left {     -webkit-transform:translatey (400px);     Transform:translatey (400px);   }     P:hover svg line.rightright {     -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:

<p class= "box" >       <svg xmlns= "http://www.w3.org/2000/svg" width= "100%" height= "100%" >           <line class= "Top" x1= "0" y1= "0" x2= "" "y2=" 0 "/>           <line class=" left "x1=" 0 "y1=" 460 "x2=" 0 "y2=" -920 "/>           < Line class= "Bottom" x1= "y1=" 460 "x2=" -600 "y2=" 460 "/>           <line class=" right "x1=" + "y1=" 0 "x2=" y2= " 1380 "/>       </svg>       
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: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;   }
To add a style to SVG and lines:

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

. Box:hover svg line {       -webkit-transition-delay:0.1s;       Transition-delay:0.1s;   }
The Stroke-dasharray we defined previously had only one value, but now we have to modify it due to size changes

. Box svg line.top,   . Box svg line.bottombottom {       stroke-dasharray:330;    }     . Box svg line.left,   . Box svg line.rightright {       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.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);   }
Done. Hope to inspire your creativity with these effects and achieve more results.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!