鼠标移入的下划线效果

Kill_Living 2017-10-23 01:40:43

不太好描述就像顶尖文案那个网站导航栏鼠标移入的下划线效果。

...全文

1415 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

Kill_Living 2017-10-23

打赏
举报

引用 6 楼 jslang 的回复:

其实这个很简单的，给你写个好了


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
	.vt {
		position: relative;
		height: 40px;
	}
	.vt ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}
	.vt li {
		float: left;
		padding: 5px;
		font-size: 20px;
	}
	.vt div {
		clear: both;
		position: relative;
		height: 4px;
		width: 0;
		left: 0;
		background-color: #f00;
		transition: all cubic-bezier(0,0,1,1.5) 200ms;
	}
</style>
</head>
<body>
<div class="vt">
	<ul>
		<li>AAAAAAA</li>
		<li>BBBB</li>
		<li>CCCCCCCCC</li>
		<li>DDD</li>
	</ul>
	<div></div>
</div>
<script type="text/javascript">
$(".vt li").mouseenter(function(event){
	$(this).parent().next().css({left:this.offsetLeft,width:this.offsetWidth});
}).mouseleave(function(event){
	$(this).parent().next().css({left:0,width:0});
});
</script>
</body>
</html>

为毛你们写的这么快，这代码一看就懂就是写不出来，算了，不比比了，改完回来结帖了

天际的海浪 2017-10-23

打赏
举报

其实这个很简单的，给你写个好了


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
	.vt {
		position: relative;
		height: 40px;
	}
	.vt ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}
	.vt li {
		float: left;
		padding: 5px;
		font-size: 20px;
	}
	.vt div {
		clear: both;
		position: relative;
		height: 4px;
		width: 0;
		left: 0;
		background-color: #f00;
		transition: all cubic-bezier(0,0,1,1.5) 200ms;
	}
</style>
</head>
<body>
<div class="vt">
	<ul>
		<li>AAAAAAA</li>
		<li>BBBB</li>
		<li>CCCCCCCCC</li>
		<li>DDD</li>
	</ul>
	<div></div>
</div>
<script type="text/javascript">
$(".vt li").mouseenter(function(event){
	$(this).parent().next().css({left:this.offsetLeft,width:this.offsetWidth});
}).mouseleave(function(event){
	$(this).parent().next().css({left:0,width:0});
});
</script>
</body>
</html>

Kill_Living 2017-10-23