CSS3实现菜单栏横向滑动效果

移动端想实现菜单栏横向滑动效果，不想用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;}在隐藏掉。