CSS3制作菜单的Hover效果

今天整理了一下Mary Lou写的《How to spice up your menu with CSS3》效果,整理一下与大家一起学习。

CSS3制作菜单的Hover效果

目的

这是一个简单的列表菜单,当你鼠标移到菜单项时,有一张图片慢慢的从左边向右边移动,并淡淡显示出来,而且此时的菜单项背景色和字体色也同时会改变。

下面我们一起来简单的学习这种效果的制作。

HTML Markup

制作上面的效果需要的HTML结构很简单,在每个列表项中放置两个span制作菜单的内容,并同时放置了一张图片,用来制作hover时图片显示出来的效果,具体的代码如下:

<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>

CSS Code

接下来制作样式效果。制作这个效果关键有以下几步:

第一步:

设置列表项中a元素的背景色,并在悬停状态下改变他的背景色:

.mh-menu li a{
    display: block;
    width: 220px;
    padding: 0px 10px;
    text-align: right;
    position: relative;
    z-index: 10;
    height: 97px;
    border-right: 1px solid #ddd;
    background: rgba(255,255,255, 0.8);
}
.mh-menu li:hover a{
    background: rgba(225,239,240, 0.4);
}

第二步:

第二步是改变每个列表项的第二个span的字体颜色。在这个效果中,使用了两个CSS3效果,其一是transition,第二个就是CSS3的伪类选择器:nth-child

.mh-menu li a span:nth-child(2){
    font-weight: 400;
    font-style: italic;
    font-size: 28px;
    font-family: 'Alegreya SC', Georgia, serif;

    -webkit-transition: color 0.2s linear;
    -moz-transition: color 0.2s linear;
    -o-transition: color 0.2s linear;
    -ms-transition: color 0.2s linear;
    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;
}

第三步:

最后一个效果就是鼠标悬停状态时显示隐藏的img,在这个效果中通过transition改变left和opacity的值。left值从0变到240px,而opacity值从0变到1.

.mh-menu li img{
    position: absolute;
    z-index: 1;
    left: 0px;
    top: 0px;

    opacity: 0;
    -webkit-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
    -moz-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
    -o-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
    -ms-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
    transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;

}
.mh-menu li:hover img{
    left: 240px;
    opacity: 1;
}

完成上面的关键几步,效果就算是完成了。当然要实现上面demo效果,还需要别的代码支撑。

上面的效果只是其中的一种,你可以发挥自己的想像力,在li之类上动动心思,会实现更多的效果。如demo 2demo 3效果。

到这里效果就算是完成了,不知道大家是否喜欢。

原文链接:https://www.w3cplus.com/css3/CSS3-Menu-Hover-Effect

发表评论

登录后才能评论