移动端想实现菜单栏横向滑动效果，不想用swiper插件或js来实现，这样太废代码了，下面web建站小编教大家如用css3来实现这种效果！
1、css3代码
.menu {height:36px;margin:8px 0;overflow:hidden;}
.menu ul{margin:0;padding: 0; height:60px;white-space:nowrap;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
.menu li{display:inline-block;margin-right:8px;vertical-align:top;border-radius:100%;}
.menu li img{width:100%;height:100%;}
2、html代码
<nav class="menu"> <ul> <li>首页</li> <li>vuejs</li> <li>js</li> <li>web</li> <li>nodejs</li> <li>seo</li> <li>go</li> <li>jquery</li> <li>css3</li> <li>html5</li> <li>mysql</li> </ul> </nav>
-webkit-overflow-scrolling:touch;在ISO会有滚动条效果，大家可以用::-webkit-scrollbar{display:none;}在隐藏掉。
上面是“CSS3实现菜单栏横向滑动效果”的全面内容，想了解更多关于 前端知识 内容，请继续关注web建站教程。
当前网址：https://m.ipkd.cn/webs_1944.html
声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！
