使用CSS3特效让你的页面菜单变得更加有趣
- - 博客园_首页日期:2012/03/20 来源: GBin1.com. 在这篇文章中,我们将介绍一些快速而有效的方法来实现CSS3的菜单特效. 这里我们将添加干净漂亮的悬浮特效来给你的菜单添加更多乐趣. 首先在每个菜单项目中我们包含一个带有俩个span元素的链接,如下:. 我们赋予这个.mh-mnu li a的属性diplay=block并且rgba(255,255,255, 0.8)作为背景色.
日期:2012/03/20 来源: GBin1.com
在这篇文章中,我们将介绍一些快速而有效的方法来实现CSS3的菜单特效。这里我们将添加干净漂亮的悬浮特效来给你的菜单添加更多乐趣。希望大家喜欢!
首先在每个菜单项目中我们包含一个带有俩个span元素的链接,如下:
<ul >
<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
来源: