css實現滑鼠移入漸變

  效果圖：

  程式碼如下：

<style>
	.nav{float:right;margin-top:50px;}
	.nav li{float:left;position:relative;margin-left:40px;}
	.nav li .up{position:absolute;top:0;left:0;color:black;width:0%;overflow:hidden;transition:.5s width;}
	.nav li:hover .up {width:100%}
</style>

<ul class="nav">
	<li>
		<a href="javascript:;">
			<div class="up"><img src="./img/home_gruen.png" alt="" /></div>
			<div><img src="./img/home.png" alt="" /></div>
		</a>	
	</li>
	<li>
		<a href="javascript:;">
			<div class="up">Course</div>
			<div>Course</div>
		</a>
	</li>
	<li>
		<a href="javascript:;">
			<div class="up">Works</div>
			<div>Works</div>
		</a>
	</li>
	<li>
		<a href="javascript:;">
			<div class="up">About</div>
			<div>About</div>
		</a>
	</li>
	<li>
		<a href="javascript:;">
			<div class="up">Team</div>
			<div>Team</div>
		</a>
	</li>
</ul>
 

做個筆記，哈哈