[CSS3技术]使用CSS3特效让你的页面菜单变得更加有趣

[tr][td]


在这篇文章中，我们将介绍一些快速而有效的方法来实现CSS3的菜单特效。这里我们将添加干净漂亮的悬浮特效来给你的菜单添加更多乐趣。希望大家喜欢！



首先在每个菜单项目中我们包含一个带有俩个span元素的链接，如下：

[*]




[*]
[*]
[*]
[*] Art Director
[*] Henry James
[*]
[*]
[*]


[*]
[*]

复制代码




我们赋予这个.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;
[*]}

复制代码




以上就是我们的幻灯效果，希望大家喜欢！





点击下载Demo

图片：0944579z4kktepllqwql69.jpg

使用CSS3特效让你的页面菜单变得更加有趣.zip







转自GBin1




[/td][/tr]