在這篇文章中，我們將介紹一些快速而有效的方法來實現CSS3的菜單特效。這里我們將添加干凈漂亮的懸浮特效來給你的菜單添加更多樂趣。希望大家喜歡！

日期：2012/03/20  來源： GBin1.com

在線演示

在這篇文章中，我們將介紹一些快速而有效的方法來實現CSS3的菜單特效。這里我們將添加干凈漂亮的懸浮特效來給你的菜單添加更多樂趣。希望大家喜歡！

首先在每個菜單項目中我們包含一個帶有倆個span元素的鏈接，如下：

<ul class="mh-menu">
    <li>
        <a href="#">
            <span>Art Director</span>
            <span>Henry James</span>
        </a>
        <img src="images/1.jpg" alt="image01"/>
    </li>
    <!-- ... -->
</ul>

我們賦予這個.mh-mnu li a的屬性diplay=block并且rgba（255,255,255, 0.8)作為背景色。當懸浮后，顏色變為rgba(225,239,240, 0.4)，如下：

.mh-menu li:hover a{
    background: rgba(225,239,240, 0.4);
}

第二個span將在懸浮中變化顏色。并且我們添加過渡效果

.mh-menu li a span:nth-child(2){
    /*...*/
    transition: color 0.2s linear;
}
.mh-menu li:nth-child(1):hover span:nth-child(2){
    color: #ae3637;
}
.mh-menu li:nth-child(2):hover span:nth-child(2){
    color: #c3d243;
}
.mh-menu li:nth-child(3):hover span:nth-child(2){
    color: #d38439;
}
.mh-menu li:nth-child(4):hover span:nth-child(2){
    color: #8e7463;
}

圖片幻燈將會向右顯示。我們添加透明過渡效果，從0到1

.mh-menu li img{
    position: absolute;
    z-index: 1;
    left: 0px;
    top: 0px;
    opacity: 0;
    transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
}
.mh-menu li:hover img{
    left: 300px;
    opacity: 1;
}

以上就是我們的幻燈效果，希望大家喜歡！

via tympanus

來源：

使用CSS3特效讓你的頁面菜單變得更加有趣