css实现导航样式（背景色从两边往中间移动）

一、 鼠标移入背景色从两边往中间移动，移出消失
HTML

<div class="menu_box">
	<ul>
		<li class="menu_item">
			<a href="index.html" class="item_link">HOME</a>
		</li>
		<li class="menu_item">
			<a href="about.html" class="item_link">ABOUT UUCARE</a>
		</li>
		<li class="menu_item">
			<a href="###" class="item_link">CROWN</a>
		</li>
		<li class="menu_item">
			<a href="###" class="item_link">COOL TECH</a>
		</li>

	</ul>
</div>

JS
这里用到了jq的鼠标移入事件。

<script type="text/javascript">
	$('.menu_item').hover(
		function() {
			$(this).addClass('active')
		},
		function() {
			$(this).removeClass('active')
		}
	)
</script>

CSS
这里使用到了伪元素，另一篇文章有做稍微详细的描述，如有需要请点击此网址：https://editor.youkuaiyun.com/md?articleId=103646090。

.menu_box {
	width: 80%;
	margin: 0 auto;
}
.menu_box .menu_item {
	display: inline-block;
	height: 60px;
}
.menu_box .menu_item a {
	display: inline-block;
	font-size: 16px;
	color: #333;
	line-height: 60px;
	padding: 0 20px;
	position: relative;
	text-decoration: none;
	box-sizing: border-box;
}
.menu_box .menu_item.active a {
	color: #fff;
}
.menu_box .menu_item a::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	z-index: -1;
	width: 0;
	height: 60px;
	background: #e73299;
	-webkit-transform: translate(-50%, 0);
	-moz-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
.menu_box .menu_item.active a::after {
	width: 100%;
}

效果图如下：

• 鼠标移入前：
  
  鼠标移入后：
  
  jq可在此下载：https://www.jb51.net/zt/jquerydown.htm

如有错误或不足，欢迎各位大佬评论指正。