css3移动端导航栏 |css3鼠标悬停手型

/* 设置导航栏样式 */
nav {
background-color: #333;
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 10px;
}
/* 设置导航栏链接样式 */
nav a {
color: #fff;
font-weight: bold;
text-decoration: none;
}
/* 设置导航栏图标样式 */
nav i {
font-size: 24px;
color: #fff;
}
/* 设置导航栏菜单 */
.menu {
position: absolute;
top: 50px;
right: 0;
width: 100%;
background-color: #333;
z-index: 1;
display: none;
}
/* 设置导航栏菜单链接 */
.menu a {
display: block;
color: #fff;
font-weight: bold;
padding: 10px;
text-align: center;
}
/* 设置导航栏菜单出现动画效果 */
.menu.show {
display: block;
animation-name: slideInDown;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
/* 定义导航栏菜单出现动画 */
@keyframes slideInDown {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}

在以上代码中，大家首先为导航栏设置了一些基本样式，如背景色、高度、对齐方式和内边距等。然后通过设置绝对定位和隐藏样式，隐藏了导航栏菜单。最后，定义了一个菜单出现动画，使导航栏菜单从上方滑入。

通过以上代码，大家可以轻松地创建一个简单而漂亮的移动端导航栏。此外，大家还可以利用CSS3的媒体查询来动态修改导航栏的样式，以适应不同的设备尺寸和方向。