聽着好像很牛的特效——幽靈按鈕DOM

給大家分享一個聽着好像很牛的東西——幽靈按鈕，這個玩意對於藝術設計細胞在高中決定不在考試試卷上畫畫的我來說，實在不感冒。但是這個按鈕的設計元素很流行，一個網頁東西不做幾個，光放上幾個按鈕就會顯得很高端。現在打開這個鏈接直接感受！！ ！ 

鏈接：  http://www.iuvo.si/

網頁預覽圖：

就是這樣一個網頁，主要內容就是幽靈按鈕！下面已經沒有什么欣賞水平的我，來解剖這個看似很牛的按鈕

首先，我作為一個專業的程序猿，最美的肯定是我女朋友，然后下面才是0和1，現在我就將這個按鈕分解成，額，肯定不是0和1，我又不是機器。將這個按鈕分解成html+CSS+JavaScript,嗯，就分解成這些。

首先html之前，我們先找幾張圖片，就拿上面的網頁來說，拿到上面的幾個圖標

    （這個大的是我截圖的，原圖的圖標是透明的放上來你們也看不見，就不取了）

有了素材，我們正式開始 HTML部分，解釋都寫在備注了

<div class="box"> ////首先寫一個大的box容器放的按鈕
        <div class="link link-miss">//一共寫三個按鈕，這是第一個
            <span class="icon"></span>//用一個span將按鈕上面的圖片當背景貼進去，在后面的css中實現
            <a href="#" class="button" data-title="My mission is clear">//我們的主角，幽靈按鈕的主體部分，data-title之后我們增加鼠標放上去出現的提示文本，之后用JS操作
                <span class="line line-top"></span>//四個span是鼠標放上去之后出現的線，我們之后通過CSS3實現
                <span class="line line-left"></span>
                <span class="line line-right"></span>
                <span class="line line-bottom"></span>
                MISSION
            </a>
        </div>
//下面把上面代碼復制兩份
        <div class="link link-play">
            <span class="icon"></span>
            <a href="#" class="button" data-title="This is my palyground">
                <span class="line line-top"></span>
                <span class="line line-left"></span>
                <span class="line line-right"></span>
                <span class="line line-bottom"></span>
                MISSION
            </a>
        </div>
        <div class="link link-touch">
            <span class="icon"></span>
            <a href="#" class="button" data-title="Lets do something together">
                <span class="line line-top"></span>
                <span class="line line-left"></span>
                <span class="line line-right"></span>
                <span class="line line-bottom"></span>
                MISSION
            </a>
        </div>
        <div class="tip">//最后我們給鼠標放上按鈕出現的文本內容
            <em></em>
            <span></span>
        </div>
    </div>

下面是CSS部分

寫CSS部分的時候，你要知道的CSS3的一個屬性Transition

定義和用法
transition 屬性是一個簡寫屬性，用於設置四個過渡屬性：
transition-property
transition-duration
transition-timing-function
transition-delay
語法
transition: property duration timing-function delay;
值描述
transition-property規定設置過渡效果的 CSS 屬性的名稱。
transition-duration規定完成過渡效果需要多少秒或毫秒。
transition-timing-function規定速度效果的速度曲線。
transition-delay定義過渡效果何時開始(延時執行時間)。
還有要處理兼容問題，畢竟是特效，低端的瀏覽器不支持
Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 屬性。
Safari 支持替代的 -webkit-transition 屬性。

IE9之前的版本不支持transiton屬性

下面先來圖片的旋轉

//設置背景圖片的樣式和動畫過渡效果
.link .icon{
    display: inline-block;
    width: 100%;
    height: 190px;
    transition: 0.2s linear;
    -webkit-transition: 0.2s linear;
    -o-transition: 0.2s linear;
    -moz-transition: 0.2s linear;
    -ms-transition: 0.2s linear;
}
//第一張圖片，下面依次是第二張和第三張
.link-miss .icon{
    background:url("mission.png") no-repeat center center;
}
.link-play .icon{
    background: url("play.png") no-repeat center center;
}
.link-touch .icon{
    background: url("touch.png") no-repeat center center;
}
//設置讓圖片翻滾旋轉的抽風
.link .icon:hover{
    transform: rotate(360deg) scale(1.2);
    -ms-transform: rotate(360deg) scale(1.2);
    -webkit-transform: rotate(360deg) scale(1.2);
    -o-transform: rotate(360deg) scale(1.2);
    -moz-transform: rotate(360deg) scale(1.2);
}

好了這樣圖片的效果設置好了，下面開始主角幽靈按鈕

//按鈕的主體部分
.button{
    display: block;
    width: 180px;
    height: 50px;
    text-decoration: none;
    line-height: 50px;
    color:#2DCB70;
    font-family: "微軟雅黑", Arial, Helvetica, sans-serif;
    font-weight: bolder;
    border: 2px solid rgba(255,255,255,0.8);
    padding-left: 20px;
    margin: 0 auto;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    background: url("allow.png") no-repeat 130px center;
    position: relative;
    transition: 0.4s ease;
    -webkit-transition: 0.4s ease;
    -o-transition: 0.4s ease;
    -moz-transition: 0.4s ease;
    -ms-transition: 0.4s ease;
}
//鼠標移動上面，邊框會改變透明度，不仔細看看不到，畢竟就改變了0.2的透明度
.button:hover{
    border: 2px solid rgba(255,255,255,1);
    background-position: 140px center;
}
//設置按鈕周圍出現的線，一開始顏色透明
.button .line{
    display: block;
    position: absolute;
    background: none;
    transition: 0.4s ease;
    -webkit-transition: 0.4s ease;
    -o-transition: 0.4s ease;
    -moz-transition: 0.4s ease;
    -ms-transition: 0.4s ease;
}
//移動到上面，顏色編程#fff，就是白色啦
.button:hover .line{
    background: #fff;
}
//下面就是分別給每條線加上不同的動畫特效了
.button .line-top{
    height: 2px;
    width: 0px;
    left: -110%;
    top: -2px;
}
.button:hover .line-top{
    width: 100%;
    left: -2px;
}
.button .line-bottom{
    width: 0px;
    height: 2px;
    right: -110%;
    bottom: -2px;
}
.button:hover .line-bottom{
    width: 100%;
    right: -2px;
}
.button .line-left{
    width: 2px;
    height: 0;
    left: -2px;
    bottom: -110%;
}
.button:hover .line-left{
    height: 100%;
    bottom: -2px;
}
.button .line-right{
    width: 2px;
    height: 0px;
    right: -2px;
    top: -110%;
}
.button:hover .line-right{
    height: 100%;
    top: -2px;
}

幽靈按鈕就這樣完成了。最后css寫提示框的樣式

.box .tip{
    position: absolute;
    padding: 0px 14px;
    height: 35px;
    line-height: 35px;
    background: #2DCB70;
    color: #fff;
    top: 160px;
    font-size: 16px;
    font-weight: normal;
    text-transform: none;
    margin: 0 auto;
    border-radius: 3px;
    opacity: 0;
}
.tip em{
    font-style: normal;
}
.tip span{
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    border: 7px solid transparent;
    border-top-color: #2DCB70;
    left: 50%;
    margin-left: -3px;
    bottom: -14px;
}

這樣就css部分就全部完成了,JS部分就是操作提示框出現

JS部分：

$(function(){
            $(".link .button").hover(function(){
                var title = $(this).attr("data-title");
                $(".tip em").text(title);
                var pos= $(this).offset().left;
                var dis = ($(".tip").outerWidth()-$(this).outerWidth())/2;
                var f = pos-dis;
                $(".tip").css({"left":f+"px"}).animate({"top":195,"opacity":1},300);
            },function(){
              $(".tip").animate({"top":160,"opacity":0},300);
            })
        })

別忘了用JQ插件，這樣簡單的操作配合之前data-title的內容，就能很好的添加上提示內容了，而且還是帶有動畫的提示內容。

 

最后，幽靈按鈕的實現並不復雜，只要能熟練的使用HTML和CSS即可，復雜的js操作都沒有，所以，聽着好像很牛的特效——幽靈按鈕，說白了，就是CSS3特效，當然這是跑開了設計，但從技術角度，一個程序猿的角度來說的。