Sliding bottom tab 仿 bilibili 安卓客户端滑动 tab

Sliding bottom tab 仿 bilibili 安卓客户端滑动 tab

先看效果

😄第一次做效果，咱就是没写过，所以写来看看，顺便把基础知识练习一下

HTML

<nav>
   <div class="container">

     <input type="radio" name="nav" id="nav-song" checked>
     <label  for="nav-song">简介</label>

     <input type="radio" name="nav" id="nav-video">
     <label id="nav-video-lable" for="nav-video">评论 1104</label>

     <input type="radio" name="nav" id="nav-live">
     <label id="nav-live-lable" for="nav-live">点我发弹幕</label>

     <span class="glider"></span>
   </div>
 </nav>

个人觉得代码部分不是很难, 但也有几个地方需要像我一样的小白注意

• 第一就是使用 <input type="radio"> 做选项卡之间互斥的情况, 并且使用 checked 默认选中某一项
• 隐藏 <input> 而使用 <label> 作为选项卡显示的汉字;

CSS

1. 整体, 取消所有的 padding, 和 margin, 并设置背景颜色和字体

   * {
        
        
     padding: 0