CSS3下實現幽靈按鈕

在HTML5和CSS3中，新增加了很多新的特性，在CSS3中的動畫效果：transition和animation爲網頁製作許多炫酷的效果提供了方便的方法；

下面展示很多網頁上炫酷的幽靈按鈕的製作過程

先來看看效果圖：

截圖中三個大的圖形當鼠標滑過的時候會順時針旋轉360°，並且會逐漸放大，下面的提示按鈕在光標移動過的時候會周圍的邊框會像射線一樣聚攏形成一個白色的邊框，並出現在正上方出現綠色的提示框；

本人寫blog不是很多，算是練手，你們看到就YY一下吧，萌萌噠

首先看整個網頁文件的佈局：

在整個大的div區域內可以平分成3個等大小的子div區域，在每個子div區域內，有可以劃分成兩個區域；子div區域內的上部分區域用來承載圖像，在這裏我們可以使用span屬性來承載，在下面的子區域放置的是一個按鈕，我們可以使用a屬性來設置；除此之外，在演示中我們可以看到，當鼠標劃入按鈕時，四條邊框從四周射入，因此我們需要單獨繪製這四條邊框，同樣我們可以使用span屬性來承載,提示框內的數據可以用data屬性進行設置，便於js的獲取：

    <div class="box">
        <div class="link link-miss">
            <span class="icon"></span>
            <a href="" class="button" data="">
                <span class="line line-top"></span>
                <span class="line line-bottom"></span>
                <span class="line line-left"></span>
                <span class="line line-right"></span>
                MISSION
            </a>
        </div> 
        <div class="link link-play">
            <span class="icon"></span>
            <a href="" class="button" data="">
                <span class="line line-top"></span>
                <span class="line line-bottom"></span>
                <span class="line line-left"></span>
                <span class="line line-right"></span>
                PLAY
            </a>
        </div> 
        <div class="link link-touch">
            <span class="icon"></span>
            <a href="" class="button" data="">
                <span class="line line-top"></span>
                <span class="line line-bottom"></span>
                <span class="line line-left"></span>
                <span class="line line-right"></span>
                TOUCH
            </a>
        </div>
    </div>

添加樣式

在這裏，我們將第二層的三個的子div的共同特性單獨抽取到一個樣式link中，再將按鈕的四條邊框的共同特性定義到一個樣式line中，再分別定義各級元素的樣式，如下：

    *{margin: 0px;padding: 0px;}
    body{
        background: #333;
    }
    .box{
        width: 800px;
        height: 280px;
        margin: 5px auto;
    }
    .box .link{
        width: 205px;
        height: 280px;
        float: left;
        margin: 0 20px;
    }
    .link .icon{
        display: inline-block;
        width: 100%;
        height: 190px;
    }
    .link-miss .icon{
        background: url("../images/mission.png") no-repeat center center;
    }
    .link-play .icon{
        background: url("../images/play.png") no-repeat center center;
    }
    .link-touch .icon{
        background: url("../images/touch.png") no-repeat center center;
    }

顯示三個圖標之後，再對三個圖標添加動畫效果，注意，在添加動畫效果的時候，應當注意到瀏覽器的兼容性

.link .icon{
    display: inline-block;
    width: 100%;
    height: 190px;
    transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -mz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
}

接着添加Button，並定義其樣式：

.button{
    display: block;
    width: 180px;
    height: 50px;
    line-height: 50px;
    text-decoration: none;
    color: green;
    font-family: Arial;
    font-weight: bolder;
    border: 2px solid rgba(255,255,255,0.6);
    padding-left: 20px;
    margin: 0 auto;
}

通過審查元素，我們可以發現，整個按鈕的大小爲204px與圖標的寬度（205px）相近，顯然，這並不是我們想要的效果，我們期望的是button的總寬度（包括border和padding）的大小爲180px，下面有兩種做法:

1. 在CSS2.1中我們可以通過計算將content的寬度，padding的寬度，border的寬度相加，使其總寬度爲180px，因此content的寬度應爲156px，我們可以將樣式button中的width的屬性值設置爲156px

2. 在CSS3中我們則可以藉助box-sizing這個屬性進行指定針對元素的寬度與高度的計算，默認值爲content-box，表示元素的寬度與高度不包括內補白區域以及邊框的寬度高度；第二個屬性值爲：border-box，表示元素的寬度與高度包括內補白區域以及邊框的寬度與高度，在使用box-sizing的同時需要注意到瀏覽器的兼容性問題，在button樣式內添加如下代碼，將width的屬性值改會180px：

    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -mz-box-sizing: border-box;
    -o-box-sizing: border-box;

其次我們爲 按鈕添加箭頭的圖標，同樣地在button樣式內添加如下代碼,將圖像設置爲不平鋪：

background: url("../images/allow.png") no-repeat;

我們可以看到，箭頭出現在按鈕的左上方，這是很正常的，因爲圖像作爲整個按鈕的子元素，默認是靠left，和top；這時我們可以設置一下箭頭圖標的樣式，將button樣式內的background添加如下屬性值，代碼如下：

    background: url("../images/allow.png") no-repeat 130px center;

到這一步，按鈕的基本製作基本完成，接下來可以製作按鈕的動畫效果：

• 箭頭圖標的向右漸變滑動效果，代碼如下：

.button:hover{
    border: 2px solid rgba(255, 255, 255, 1);
    background-position: 140px;
}

我們可以明顯地看到當鼠標移動上去之後，按鈕的邊框顏色由淺變深，箭頭向右移動嗎，但是效果有點僵硬，這個時候我們可以爲其添加過渡效果，在button屬性內添加transition屬性，代碼如下：

     transition: all 0.4s ease-in;
    -moz-transition: all 0.4s ease-in;
    -webkit-transition: all 0.4s ease-in;
    -ms-transition: all 0.4s ease-in;
    -o-transition: all 0.4s ease-in;

有點長，所以關於邊框的特效和提醒框的特效在下一篇續上，哇哈哈…