主要利用css中的transtion属性,在鼠标移动到时,改变伪元素的大小,字体的颜色
通过设置伪元素的阴影尺寸实现颜色收缩扩散的效果
<!DOCTYPE HTML>
<head>
<meta charset="utf-8">
<style>
//设置.nav , .tab , li的样式,浏览器一般会有默认的padding,所以.tab中的padding设置为0
.nav {margin: 100px;}
.tab {margin: 0 auto; width:400px; height:40px; border: 1px solid #ddd; border-radius: 10px;
text-align:center; line-height:40px; padding: 0px; overflow: hidden;}
.tab li {float: left;width:100px;position: relative;overflow: hidden;}
//设置li的伪元素,:before为竖线,:after为一个宽高为0的中心点,通过绝对位置absolute定位在li中
.tab li::after, .tab li::before {content: ''}
.tab li:not(:first-child)::before {position: absolute; left: 0; top:10px;width:1px; height:20px; background: #ddd;}
.tab li::after {position: absolute; width:0px; height:0px; top:50%; left:50%; z-index: 1;}
//a设置为行内元素
.tab li a {position: relative; display: inline; z-index: 2; font-size: 14px; color: black; text-decoration: none;}
.tab li::after, .tab li::before , .tab li a {transition: all 0.5s ease-in-out}
//鼠标移至伪元素与a时的变化
.tab li:hover::after {box-shadow: 0 0 0 100px #1202f7;}
.tab li:hover::before, .tab li:hover+li::before {height: 0px; top:20px}
.tab li:hover a {color: #ddd}
</style>
</head>
<body>
<div class='nav'>
<ul class='tab'>
<li><a href="">导航1</a></li>
<li><a href="">导航2</a></li>
<li><a href="">导航3</a></li>
<li><a href="">导航4</a></li>
</ul>
</div>
</body>