这段HTML和CSS代码展示了一个动态Tab导航的实现。通过设置`display:flex`和`position:absolute`实现布局，利用伪元素`:before`创建底部边框动画效果。当鼠标悬停在Tab上时，边框会平滑展开，同时激活的Tab背景色变为深色，文字颜色变为白色，提供了一种简洁而交互友好的导航体验。
-
<!DOCTYPE html> -
<html lang="en"> -
<head> <meta charset="UTF-8"> -
<meta name="viewport" content="width=device-width, initial-scale=1.0"> -
<title>tab</title> -
<style> -
ul { -
display: flex; -
position: absolute; -
width: 100%; -
top: 20px; -
left: 50%; -
transform: translate(-50%, -50%); } -
li { -
list-style: none; -
position: relative; -
padding: 20px; -
font-size: 20px; -
color: #222; -
line-height: 1; -
transition: all 0.2S linear; -
cursor: pointer; -
} -
li::before{ -
content: ''; -
position: absolute; -
top: 0; -
left: 100%; -
width: 0; -
height: 100%; -
border-bottom: 2px solid #222; -
transition: all 0.2S linear; -
} -
li:hover::before -
{ -
width: 100%; -
top: 0; -
left: 0; -
transition: 0.2S; -
border-bottom: 2px solid #222; -
z-index: -1; -
} -
li:hover~li::before { -
left: 0; -
} -
li:active { -
background: #222; -
color: #fff; -
} -
</style> -
</head> -
<body> -
<ul> -
<li>首页</li> -
<li>分类</li> -
<li>样式</li> -
<li>效果</li> -
<li>游戏</li> -
</ul> -
</body> -
</html>
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
