§ ITPOW >> 文档 >> CSS

纯 CSS 3 动画实例-导航菜单下的动态下划线

作者:vkvi 来源:ITPOW(原创) 日期:2021-7-9

本特效,将鼠标移到超链接上时,超链接下方有一个动态伸长的下划线(颜色、大小、位置均可指定)。

<!DOCTYPE html>

<html>
<head>
<style type="text/css">
	.nav li a { display:inline-block; position:relative; line-height:30px; }
	.nav li a::after { content:''; position:absolute; bottom:0; left:10%;
	    border-radius:2px; width:80%; height:2px; background:#000;
	    transform:scaleX(0); transition:0.3s; }
	.nav li a:hover::after { transform:scaleX(1); }
	.nav li.cur a::after { transform:scaleX(1); }
	.nav li.cur a:hover::after { transform:scaleX(0.5); }
</style>
</head>

<body>
	<ul class="nav">
		<li><a href="http://www.itpow.com/">itpow</a></li>
		<li><a href="http://www.itpow.com/">itpow</a></li>
		<li class="cur"><a href="http://www.itpow.com/">itpow</a></li>
	</ul>
</body>
</html>


相关文章