css做个透明导航栏 |css动画width

.nav-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: transparent;
z-index: 999;
transition: background-color 0.3s ease-in-out;
}
.nav-bar:hover {
background-color: rgba(0, 0, 0, 0.2);
}
.nav-menu {
display: flex;
justify-content: flex-end;
align-items: center;
height: 72px;
margin-right: 32px;
}
.nav-menu li {
list-style-type: none;
margin-left: 16px;
}
.nav-menu li a {
text-decoration: none;
color: white;
font-size: 16px;
font-weight: 600;
}

大家首先创建一个class为nav-bar的div来作为大家的导航栏。这个div采用了固定定位和宽度为100%的样式，让导航栏始终停留在页面头部并跨越整个页面宽度。大家将背景颜色设为透明，并添加一个过渡效果，当鼠标悬浮在导航栏上时，颜色变为半透明的黑色。

接下来，大家给导航栏添加一个ul，并为其添加一个名为nav-menu的class。大家使用弹性布局让导航栏菜单项靠右对齐，并设置每个li元素的左外边距为16像素。对于大家的菜单项，大家在标签中添加样式以去除默认文本装饰样式。

最后，使用这个HTML和CSS代码，你已经可以创建出一个单纯的透明导航栏。当然，你可以在这个基础上添加更多样式，例如调整导航栏的高度，增加背景图像等，以达到更完美的视觉效果。