本篇会放置多种下划线滑动效果，一篇一篇增加，更新中
1、当前 tab 出现下划线的同时，前一个下划线同时消失(出现方向与消失方向保持一致)，伴随过渡效果。
change tab
ul {
display: flex;
position: absolute;
width: 800px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
list-style: none;
}
li {
position: relative;
padding: 20px;
color: #000;
line-height: 1;
transition: 0.2s all linear;
cursor: pointer;
}
li::before {
content: "";
position: absolute;
top: 0;
left: 100%;
width: 0;
height: 100%;
border-bottom: 2px solid #f00;
transition: 0.2s all linear;
}
li:active {
background: #000;
color: #fff;
}
.active ~ li::before {
left: 0;
}
.active::before {
width: 100%;
left: 0;
top: 0;
}
.hover::before{
width: 200%;
}
张杰 周杰伦林俊杰薛之谦你
var lis = document.getElementsByClassName('tab');
for(var i=0; i
lis[i].onclick = function(){
var that = this;
for(var i=0; i
lis[i].classList.remove('active')
this.classList.add('active')
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
