聽着好像很牛的特效——幽靈按鈕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 十、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特效，固然這是跑開了設計，但從技術角度，一個程序猿的角度來講的。