使用CSS3特效让你的页面菜单变得更加有趣-优快云博客

本文介绍如何使用CSS3创建带有悬浮效果的菜单。通过为不同元素添加特定样式，实现了菜单项的背景色变化及文字颜色变换，并加入图片幻灯片效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

css3 menu

在这篇文章中，我们将介绍一些快速而有效的方法来实现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

来源：