HTML5+CSS3 's Awesome hyperlink effects

Today we will introduce a very cool hyperlink effect. When you do some front-end pages, you can use these avant-garde fashion effects.

Most of these hyperlink features are implemented with pseudo-elements, SVG, and HTML5 animations. The effect is very beautiful, do not believe to see below.

Hover over these links with your mouse and you'll experience a completely different feeling than traditional links.

Of course the most important point: you need to use a modern browser to have a better experience, such as Google Chrome or Firefox browser.

Demo effect and download please see: http://yusi123.com/3236.html
1. [Code] excerpt from the first section of the demo effect CSS, you can see.
/* Curtain */
. link-curtain {
Background:rgba (149,165,166,0.3);
}

. Link-curtain a {
Overflow:hidden;
font-weight:200;
}

. Link-curtain A::before,
. Link-curtain A::after {
Position:absolute;
top:0;
left:0;
width:100%;
height:100%;
Content: ";
-webkit-transition:-webkit-transform 0.3s;
Transition:transform 0.3s;
}

. Link-curtain A::before {
border-top:2px solid #fff;
Background:transparent;
-webkit-transition-delay:0.3s;
transition-delay:0.3s;
-webkit-transform:translatey (Calc (100%-2px));
Tra?nsform:translatey (Calc (100%-2px));
}http://www.enterdesk.com/special/sexygirl/?

. Link-curtain A:hover::before,
. Link-curtain A:focus::before {
-webkit-transition-delay:0s;
transition-delay:0s;
}

. Link-curtain A:hover::before,
. Link-curtain A:focus::before,
. Link-curtain A:hover::after,
. Link-curtain A:focus::after {
-webkit-transform:translatex (0);
Transform:translatex (0);
} Beauty

. Link-curtain A::after {
Z-index:-1;
Background:rgba (255,255,255,0.7);
-webkit-transform:translatey (-100%);
Transform:translatey (-100%);
}

. Link-curtain A:hover::after,
. Link-curtain A:focus::after {
-webkit-transition-delay:0.3s;
transition-delay:0.3s;
}

HTML5+CSS3 's Awesome hyperlink effects