html5+CSS3实现的炫酷超链接特效

今天为大家介绍一个非常炫酷的超链接特效。在你做一些前端的网页时可以在里面去用上这些前卫时尚的效果。

这些超链接特性，大都是借助伪元素、svg、HTML5动画来实现的。效果都很漂亮，不信看下面。

用你的鼠标悬停在这些链接上，你就能体验和传统链接完全不一样的感觉。

当然最重要的一点：你需要使用现代浏览器才能有更好的体验效果，比如谷歌浏览器或火狐浏览器。

演示效果和下载请看：http://yusi123.com/3236.html
1. [代码]节选其中的第一段DEMO效果css,大家可以看看。
/* 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);
}美女

.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;
}