SEE Conf 2021!  支付宝体验科技大会

CSS3制作菜单的Hover效果

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

最近一直在整理W3cplus Demo站点,收集和写了一些CSS3的Demo效果。今天整理了一下写的《How to spice up your menu with CSS3》效果,整理一下与大家一起学习。

目的

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

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

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效果。

到这里效果就算是完成了,不知道大家是否喜欢。如果有更好的心路和创意欢迎在下面的评论中与我们一起分享。或者制作demo效果放在w3cplus demo站上。

如需转载烦请注明出处:W3CPLUS

Air Max 1 Mid Liberty Max Kicks

如需转载,烦请注明出处:https://www.w3cplus.com/css3/CSS3-Menu-Hover-Effect

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部