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

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

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




	
	Document
	
		*{
			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://scyanting.com/article/igceps.html