2024年09月29日 建站教程
移动端想实现菜单栏横向滑动效果，不想用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;}在隐藏掉。
本文链接：http://so.lmcjl.com/news/14213/