CSS3——写一个下滑线的展开与合上

最新推荐文章于 2022-05-27 18:03:20 发布

前端小白的江湖路

最新推荐文章于 2022-05-27 18:03:20 发布

阅读量1.5k

点赞数 1

分类专栏： HTML/CSS 文章标签： css3

本文链接：https://blog.csdn.net/qq_21058391/article/details/53518781

版权

HTML/CSS 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

这是我刚学CSS的时候一个热心教我的方法，我并不认识他，不过却让我很感动

代码很简单，不多说了

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			body{
				font-family:"Helvetica";
			}

			.nav{
				display:inline-block;
				position:relative;
				width:80px;
				text-align:center;
				line-height:40px;
				height:40px;
			}

			.nav::after{
				position:absolute;
				content:"";
				display:block;
				width:100%;
				height:2px;
				background-color:black;
				left:0;
				bottom:0;
				transform:scaleX(0);
				visibility:hidden;     初始的时候不显示   X变形为0长度
				transition:all 0.4s;
			}

			.nav-active{

			}

			.nav-active::after{
				position:absolute;
				content:"";
				display:block;
				width:100%;
				height:2px;
				background-color:black;
				left:0;
				bottom:0;
				transform:scaleX(1);   显示并过度
				visibility:visible;
				transition:all 0.4;
			}
		</style>
		<script src="../jquery-3.1.0.min.js"></script>
	</head>

	<body>
		<div>
			<div class="nav">
				HOME
			</div>

			<div class="nav">
				PRODUCT
			</div>

			<div class="nav">
				NEWS
			</div>

			<div class="nav">
				CONTACT
			</div>
		</div>
		<script>
			$(".nav").mouseover(function(){
				$(this).addClass("nav-active");
			});

			$(".nav").mouseout(function(){
				$(this).removeClass("nav-active");
			});

		</script>
	</body>
</html>

前端小白的江湖路

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3——写一个下滑线的展开与合上

这是我刚学CSS的时候一个热心教我的方法，我并不认识他，不过却让我很感动代码很简单，不多说了 Document body{ font-family:"Helvetica"; } .nav{ display:inline-block; position:relative; width:80px; text-
复制链接

扫一扫