Html
    Css
    Js

    
                        
.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);
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css导航下划线动画效果

更新时间:2021-12-17 00:26:47

0