效果图
字面描述就是从tab导航的中间开始然后向两边过渡的动画效果,增加页面的美观性...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css导航下划线动画效果</title>
</head>
<style>
.items {
display: flex
}
.item {
width: 100px;
height: 60px;
text-align: center;
line-height: 60px;
background-color: black;
color: white;
position: relative;
}
.item:before {
content: '';
height: 4px;
background-color: #BADFED;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
transform: scaleX(0);
transition: .3s;
}
.item:hover:before {
transform: scaleX(1);
}
</style>
<body>
<div class="items">
<div class="item">因为</div>
<div class="item">所以</div>
<div class="item">无所谓</div>
</div>
</body>
</html>
当前页面按F12输入document.querySelectorAll('.tool-item-href')[0].click() 有惊喜哦~~~