鼠标滑过字体颜色从左向右渐变

鼠标滑过字体颜色从左向右渐变:

成都创新互联专注于网站建设、成都网站建设、网页设计、网站制作、网站开发。公司秉持“客户至上,用心服务”的宗旨,从客户的利益和观点出发,让客户在网络营销中找到自己的驻足之地。尊重和关怀每一位客户，用严谨的态度对待客户，用专业的服务创造价值，成为客户值得信赖的朋友，为客户解除后顾之忧。

	
	
	
		*{
			margin:0;
			padding:0;
		}
		body>div{
			width: 1200px;
			margin:0 auto;
		}
		ul#nav{
			background: #11120D;
		}
		ul#nav li{
			display: inline-block;
		}
		ul#nav li a{
			position: relative;
    		display: block;
			color:#fff;
			text-decoration: none;	
			line-height: 50px;
			margin:0 10px;
		}
		/*这里是主要的效果*/
		a:hover {
		    color: #00a78e;
		}
		a:hover::before {
		    max-width: 100%;
		}
		a::before{
			position: absolute;
		    top: 0;
		    left: 0;
		    overflow: hidden;
		    max-width: 0;
		    height: 80%;
		    border-bottom: 3px solid #00a78e;
		    color: #00a78e;
		    content: attr(data-hover);
		    -webkit-transition: max-width 0.4s;
		    -moz-transition: max-width 0.4s;
		    transition: max-width 0.4s;
		}

	


	

		
			

				主页
			
			

				服务
			
			

				关于我
			
			

				主页
			
			

				服务
			
			

				关于我
			
			

				主页
			
			

				主页
			
			

				服务
			
			

				关于我
			
			

				主页
			
		
	

标题名称：鼠标滑过字体颜色从左向右渐变
文章分享：http://bjjierui.cn/article/igceps.html