css3菜单左滑切换效果 |jsp里怎么用css

/*定义菜单项的样式*/
.menu li{
float: left;
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
background-color: #ccc;
cursor: pointer;
}
/*定义当前激活的菜单项的样式*/
.active{
background-color: #f00;
color: #fff;
}
/*定义菜单项滑动的动画效果*/
@keyframes menuAnimation{
0%{
transform: translateX(0);
}
100%{
transform: translateX(-100px);
}
}
/*将菜单项容器设置为可移动的*/
.menu{
position: relative;
left: 0;
transition: left 0.2s ease-in-out;
}
/*定义菜单项容器的样式*/
.menuContainer{
overflow: hidden;
width: 300px;
height: 50px;
margin: 0 auto;
}

在以上代码中，大家首先定义了菜单项的样式，包括了每个菜单项的大小、背景颜色、指针形状等。接着，大家定义了当前激活的菜单项的样式，以便在菜单项被选中时进行样式变换。

接着，大家定义了菜单项滑动的动画效果，通过CSS3的@keyframes来定义菜单项向左滑动的过程。最后，将菜单项容器设置为可移动的，并定义菜单容器的样式，以便菜单项能够在容器内移动。

有了以上代码，大家只需要将菜单项放入一个容器内，并指定容器的宽度，就可以实现CSS3菜单左滑切换效果了。通过对菜单容器的移动，不同的菜单项就可以在容器内切换显示。