有趣的css - 滑塊動(dòng)效導(dǎo)航欄

發(fā)布日期：2025-02-01 10:06:37 瀏覽次數(shù)： 1054 來(lái)源：設(shè)計(jì)師工作日常

《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。

整体效果

?知识点：
1️⃣ :hover 和 :checked 选择器
2️⃣ transition 过渡属性
3️⃣ input 单选按钮

?思路：
创建三个单选按钮并隐藏，然后绘制三个导航栏按钮，再利用单选按钮选中状态来移动底层的背景。

三个 tab 项滑块导航菜单，适用于多种设备界面。

核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。

核心代码

html 代码

<nav class="nav93">
    <input type="radio" name="radio93" id="radio93-1" checked="" />
    <label for="radio93-1" class="nav-tab93">首页</label>
    <input type="radio" name="radio93" id="radio93-2" />
    <label for="radio93-2" class="nav-tab93">设计</label>
    <input type="radio" name="radio93" id="radio93-3" />
    <label for="radio93-3" class="nav-tab93">前端</label>
    <span class="slide93"></span>
</nav>

导航栏主体代码

注意： 这里的 input 单选按钮以及 label 标签，按序写下来，这样才能在css中利用 :checked 选择器来改变成需要的样式效果。

css 部分代码

.nav93{
    height: 32px;
    padding: 12px;
    position: relative;
    overflow: hidden;
    display: flex;
    background-color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    border-radius: 28px;
}
.nav93 input[name='radio93']{
    display: none;
}
.nav-tab93{
    width: 68px;
    height: 32px;
    line-height: 32px;
    border-radius: 16px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #3d3d3d;
    background-color: transparent;
    transition: all 0.3s linear;
    cursor: pointer;
    z-index: 2;
}
.nav-tab93:hover{
    transform: translateY(-1px);
}
.nav93 input[name='radio93']:checked + .nav-tab93{
    color: #45873c;
}
.slide93{
    width: 68px;
    height: 32px;
    line-height: 32px;
    border-radius: 16px;
    background-color: rgba(0, 129, 12, 0.1);
    position: absolute;
    transition: all 0.3s linear;
}
#radio93-1:checked ~ .slide93{
    transform: translateX(0);
}
#radio93-2:checked ~ .slide93{
    transform: translateX(68px);
}
#radio93-3:checked ~ .slide93{
    transform: translateX(136px);
}

1、绘制出三个 tab 项以及三个单选按钮，并且隐藏掉单选按钮 display: none; ，然后导航栏外观的基本样式。

2、给 label 标签添加基本样式以及字体样式，添加透明背景，然后加上 transition 过渡属性，并且设置层级 z-index ，让其内容层级更高，在最上方。

3、利用 :checked 选择器，当某个按钮选中时，改变按钮同级的下一个元素的文字颜色。

4、再定义最后面的 span 标签，让其基本尺寸同 label 标签大小相同，定义 span 的背景颜色，并且加上 transition 过渡属性。

5、最后再利用 :checked 选择器，来判断当按钮选中时，根据选中的按钮来让 span 元素移动到对应的按钮下方。

注意 :checked + [classname] 是表示选中按钮的下一个同级 [classname] 元素；:checked ~ [classname] 是表示选中按钮的后面同级的 [classname] 元素。

完整代码如下

html 页面

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
        <title>滑块动效导航栏</title>
    </head>
    <body>
        <div class="app">
            <nav class="nav93">
                <input type="radio" name="radio93" id="radio93-1" checked="" />
                <label for="radio93-1" class="nav-tab93">首页</label>
                <input type="radio" name="radio93" id="radio93-2" />
                <label for="radio93-2" class="nav-tab93">设计</label>
                <input type="radio" name="radio93" id="radio93-3" />
                <label for="radio93-3" class="nav-tab93">前端</label>
                <span class="slide93"></span>
            </nav>
        </div>
    </body>
</html>

css 样式

.app{
    width: 100%;
    height: 100vh;
    background-color: #fff;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.nav93{
    height: 32px;
    padding: 12px;
    position: relative;
    overflow: hidden;
    display: flex;
    background-color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    border-radius: 28px;
}
.nav93 input[name='radio93']{
    display: none;
}
.nav-tab93{
    width: 68px;
    height: 32px;
    line-height: 32px;
    border-radius: 16px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #3d3d3d;
    background-color: transparent;
    transition: all 0.3s linear;
    cursor: pointer;
    z-index: 2;
}
.nav-tab93:hover{
    transform: translateY(-1px);
}
.nav93 input[name='radio93']:checked + .nav-tab93{
    color: #45873c;
}
.slide93{
    width: 68px;
    height: 32px;
    line-height: 32px;
    border-radius: 16px;
    background-color: rgba(0, 129, 12, 0.1);
    position: absolute;
    transition: all 0.3s linear;
}
#radio93-1:checked ~ .slide93{
    transform: translateX(0);
}
#radio93-2:checked ~ .slide93{
    transform: translateX(68px);
}
#radio93-3:checked ~ .slide93{
    transform: translateX(136px);
}

页面渲染效果

以上就是所有代码，以及简单的思路，希望对你有一些帮助或者启发。

優(yōu)網(wǎng)科技，優(yōu)秀企業(yè)首選的互聯(lián)網(wǎng)供應(yīng)服務(wù)商

優(yōu)網(wǎng)科技秉承"專(zhuān)業(yè)團(tuán)隊(duì)、品質(zhì)服務(wù)" 的經(jīng)營(yíng)理念，誠(chéng)信務(wù)實(shí)的服務(wù)了近萬(wàn)家客戶(hù)，成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長(zhǎng)期合作伙伴！

優(yōu)網(wǎng)科技成立于2001年，擅長(zhǎng)網(wǎng)站建設(shè)、網(wǎng)站與各類(lèi)業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門(mén)戶(hù)型、營(yíng)銷(xiāo)商務(wù)型、電子商務(wù)型、信息門(mén)戶(hù)型、微信小程序定制開(kāi)發(fā)、移動(dòng)端應(yīng)用（手機(jī)站、APP開(kāi)發(fā)）、微信定制開(kāi)發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。