SVG Folding Line Hover Effect

Today in this article I am going to share a little but very useful interactive SVG Folding Line Hover Effect.  In this article you will see a hover effect where I am using a anchor tag <a> and along with it using svg having 120 lines.

Here each svg lines styled on the basis of their count number if they are even they will have some style and if they are odd they will have some different style attribute, resulting you will find each line will be feel separated and producing a folding animation while hovering on it.

Each time when you will hover on button or anchor tag will get same animation every time. Each svg lines are followed by transition-delay property of advance css that is css3.

Don’t miss my recent most popular Articles, these article gone a level up on animation by using both css and jQuery.

I am sure  you will like them very much:

1. Layered Animation effect using CSS and jQuery
2. BB8 Toggle Switch Animation using CSS

Yes after briefing sure you are waiting to know about coding part for this article, so lets start coding :

HTML Structure:

CSS Style Sheet: