css导航分类透明效果 |登录页面css

/* 定义导航栏样式 */
nav {
background-color: transparent;
position: relative;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: space-between;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
nav li {
margin: 0 15px;
text-align: center;
}
nav a {
color: #fff;
font-weight: bold;
}
/* 设置鼠标悬停时的样式 */
nav a:hover {
color: #4d4d4d;
}
/* 定义透明度渐变效果 */
nav::before {
content: "";
background: rgba(255, 255, 255, 0.3);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
z-index: -1;
}
nav:hover::before {
opacity: 1;
}

以上代码中，定义了导航栏的样式，使用flex布局使得菜单项自适应大小并且有一定的间隔，而透明度渐变效果则是通过伪元素实现的。当鼠标悬停在导航栏上时，透明度渐变效果将被触发，使得整个导航栏一片模糊，极具美感。

需要注意的是，此种实现方式需要考虑浏览器兼容性和性能问题。在较老的浏览器中，该效果可能无法正常运行，而在性能较低的设备上，渐变效果可能会导致卡顿。因此，实际应用时需要更具实际需要进行选择和调整。