1.目標效果

現在幽靈按鈕是網站上十分常見的一種效果，通過使按鈕變的薄透來提高頁面的美觀性，這裡我們要實現的效果是有三個圖片，在滑鼠懸浮時可以放大並旋轉360度，每個圖示下面都有一個幽靈按鈕，當滑鼠懸浮時會有四邊飛入，tooltip等效果，下面介紹下實現的具體過程。

2.實現思路

1）圖片部分：

首先設定整體盒子的寬度，然後設定每個裝有圖片和按鈕的盒子的寬度，span標籤以背景圖片的方式匯入圖片，設定旋轉放大效果。這裡注意transition的使用，它是在原來的未變化的樣式中設定的。

2）按鈕部分：

設定按鈕的寬高、邊框、邊距等樣式，這裡注意 box-sizing: border-box;屬性的使用，當設定寬高後，設定的邊距等會將原有的盒子撐大，而使用這一個屬性，會使得盒子的大小就是所設定的寬高的值，內邊距等在此基礎上向內計算，然後設定四邊飛入的效果，每個飛入的邊都是span標籤設定寬高而成，這裡面最上邊由左側飛入，動畫效果是由left:－110%，width:0變成left:－2，width:100%。

3）tooltip部分

由於按鈕等寬高已經設定完畢，現在加入的tooltip最好放在三個大盒子標籤的外面，設定其樣式設為絕對定位並隱藏(opacity = 0)並用span標籤製作一個倒三角，然後使用jquery完成下面的部分，為每個盒子設定data-title屬性，即要寫入tooltip中的內容，當滑鼠懸浮時，將data-title中的內容寫入em標籤，在設定其left屬性並設定變化的動畫，即top與opacity數值的改變。至此效果完成。

3.程式碼實現

1）html部分

<div class="box">
        <div class="link link-miss">
            <span class="icon"></span>
            <a href="#" class="button" data-title="My mission id clear">
                <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-play">
            <span class="icon"></span>
            <a href="#" class="button" data-title="This is my playground">
                <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="Let's 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>
<script>
    $(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",
                "opacity":1
            }).animate({
                "top":195,"opacity":1
            },300);

        },function(){
            $(".tip").animate({"top":160,"opacity":0},300);
        })
    })
</script>
 

*{
    margin:0;
    padding:0;
}
body{
    background: #333;
}
.box{
    width:1000px;
    height:280px;
    margin:50px auto;
}
.box .link{
    width:205px;
    height:280px;
    margin:0 20px;
    float:left;
    position: relative;
}
.link .icon{
    width:100%;
    height:190px;
    display: inline-block;
    -webkit-transition: 0.2s linear;
    -moz-transition: 0.2s linear;
    -ms-transition: 0.2s linear;
    -o-transition: 0.2s linear;
    transition: 0.2s linear;
}
.link-miss .icon{
    background: url("https://www.iuvo.si/sites/all/themes/iuvo/images/svg/icon-console-filled.svg") no-repeat center center;
    background-size:130px 130px;
}
.link-play .icon{
    background: url("https://www.iuvo.si/sites/all/themes/iuvo/images/svg/icon-rocket.svg") no-repeat center center;
    background-size:130px 130px;
}
.link-touch .icon{
    background: url("https://www.iuvo.si/sites/all/themes/iuvo/images/svg/icon-location-filled.svg") no-repeat center center;
    background-size:130px 130px;
}
.link .icon:hover{
    transform: rotate(360deg) scale(1.3);
    -ms-transform: rotate(360deg) scale(1.2);
    -webkit-transform:rotate(360deg) scale(1.3);
    -o-transform: rotate(360deg) scale(1.2);
}
.button{
    display: block;
    position: relative;
    width:180px;
    height:50px;
    text-decoration: none;
    line-height:50px;
    color:#2dcb70;
    font-family: "微軟雅黑", Arial, sans-serif;
    font-weight:bolder;
    border: 2px solid rgba(255,255,255,0.8);
    padding-left:20px;
    margin:0 auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: url("https://www.iuvo.si/sites/all/themes/iuvo/images/svg/icon-button-arrow.svg") no-repeat 130px center;
    -webkit-transition: 0.2s ease;
    -moz-transition: 0.2s ease;
    -ms-transition: 0.2s ease;
    -o-transition: 0.2s ease;
    transition: 0.2s ease;
}
.button:hover{
    border:2px solid rgba(255,255,255,1);
    background-position: 140px center;
}
.button .line{
    display: block;
    position: absolute;
    -webkit-transition: 0.2s ease;
    -moz-transition: 0.2s ease;
    -ms-transition: 0.2s ease;
    -o-transition: 0.2s ease;
    transition: 0.2s ease;

}
.button:hover .line{
    background: #fff;
}
.button .line-top{
    height:2px;
    width:0;
    left:-110%;
    top:-2px;
}
.button:hover .line-top{
    width:100%;
    left:-2px;
}
.button .line-bottom{
    height:2px;
    width:0;
    right:-110%;
    bottom:-2px;
}
.button:hover .line-bottom{
    width:100%;
    right:-2px;
}
.button .line-left{
    height:0;
    width:2px;
    bottom:-110%;
    left:-2px;
}
.button:hover .line-left{
    height:100%;
    bottom:-2px;
}
.button .line-right{
    height:0;
    width:2px;
    top:-110%;
    right:-2px;
}
.button:hover .line-right{
    height:100%;
    top:-2px;
}
.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: -7px;
    bottom:-14px;
}
 

4.最終效果