html5+CSS3實現的炫酷超連結特效

標籤：des   http   os   io   使用   ar   for   代碼   html   

今天為大家介紹一個非常炫酷的超連結特效。在你做一些前端的網頁時可以在裡面去用上這些前衛時尚的效果。

這些超連結特性，大都是藉助虛擬元素、svg、HTML5動畫來實現的。效果都很漂亮，不信看下面。

用你的滑鼠移至上方在這些連結上，你就能體驗和傳統連結完全不一樣的感覺。

當然最重要的一點：你需要使用現代瀏覽器才能有更好的體驗效果，比如Google瀏覽器或Firefox瀏覽器。

示範效果和下載請看：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;
}

html5+CSS3實現的炫酷超連結特效