HTML+CSS TAB导航栏

老K博客

发布于 2024-06-12 09:42:03

890

发布于 2024-06-12 09:42:03

文章被收录于专栏：老K博客老K博客

这段代码实现了一个名为"Tab导航栏"的效果，它是一个基于CSS的导航栏，包含五个选项卡，每个选项卡都有一个带有渐变背景色的滑块，当用户点击选项卡时，滑块会滑动到相应的位置。同时，选中的选项卡会变为白色，未选中的选项卡会变为灰色。

Code

html

css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: linear-gradient(200deg, #e8e8e8, #a8edea, #d1fffc, #e8e8e8);
}

.wrapper {
    width: 60vw;
    height: 60px;
    line-height: 60px;
    background-color: #fff;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.25);
    border-radius: 50px;
}

.wrapper nav {
    display: flex;
    position: relative;
}

.wrapper nav label {
    flex: 1;
    width: 100%;
    position: relative;
    z-index: 1;
    cursor: pointer;
}

.wrapper nav label a {
    position: relative;
    z-index: -1;
    color: #333;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
}

.wrapper nav label a i {
    font-size: 25px;
    margin: 0px 7px;
}

.wrapper nav input {
    display: none;
}

.wrapper nav .tab {
    position: absolute;
    height: 100%;
    width: 20%;
    left: 0px;
    bottom: 0px;
    background: linear-gradient(to right, #ff5858, #ff5858);
    border-radius: 50px;
    transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper nav #home:checked~label.home a,
.wrapper nav #comment:checked~label.comment a,
.wrapper nav #envelope:checked~label.envelope a,
.wrapper nav #heart:checked~label.heart a,
.wrapper nav #user:checked~label.user a {
    color: #fff;
    transition: 0.6s;
}

.wrapper nav #comment:checked~.tab {
    left: 20%;
}

.wrapper nav #envelope:checked~.tab {
    left: 40%;
}

.wrapper nav #heart:checked~.tab {
    left: 60%;
}

.wrapper nav #user:checked~.tab {
    left: 80%;
}

实现思路拆分

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

这段代码是设置所有元素的外边距和内边距为0，并且使用 border-box 盒模型。

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: linear-gradient(200deg, #e8e8e8, #a8edea, #d1fffc, #e8e8e8);
}

这段代码是设置body元素的高度为100vh，使其占据整个视口的高度。同时，使用 flex 布局使其子元素水平和垂直居中。最后，设置背景为一个线性渐变。

.wrapper {
    width: 60vw;
    height: 60px;
    line-height: 60px;
    background-color: #fff;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.25);
    border-radius: 50px;
}

这段代码是设置一个名为"wrapper"的元素的宽度、高度、行高、背景颜色、阴影和圆角。

.wrapper nav {
    display: flex;
    position: relative;
}

这段代码是设置一个名为"nav"的元素的布局为flex，并且设置其相对定位。

.wrapper nav label {
    flex: 1;
    width: 100%;
    position: relative;
    z-index: 1;
    cursor: pointer;
}

这段代码是设置一个名为 "label" 的元素的布局为flex，并且设置其相对定位和 z-index 属性。同时，设置光标为指针。

.wrapper nav label a {
    position: relative;
    z-index: -1;
    color: #333;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
}

这段代码是设置一个名为"a"的元素的相对定位和 z-index 属性。同时，设置字体颜色、字体大小、字体加粗和文本装饰为无。

.wrapper nav label a i {
    font-size: 25px;
    margin: 0px 7px;
}

这段代码是设置一个名为"i"的元素的字体大小和外边距。

.wrapper nav input {
    display: none;
}

这段代码是设置一个名为 "input" 的元素的显示属性为 none ，即隐藏该元素。

.wrapper nav .tab {
    position: absolute;
    height: 100%;
    width: 20%;
    left: 0px;
    bottom: 0px;
    background: linear-gradient(to right, #ff5858, #ff5858);
    border-radius: 50px;
    transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

这段代码是设置一个名为 "tab" 的元素的绝对定位、高度、宽度、左侧和底部位置、背景颜色和圆角。同时，设置过渡效果。

.wrapper nav #home:checked~label.home a,
.wrapper nav #comment:checked~label.comment a,
.wrapper nav #envelope:checked~label.envelope a,
.wrapper nav #heart:checked~label.heart a,
.wrapper nav #user:checked~label.user a {
    color: #fff;
    transition: 0.6s;
}

这段代码是设置选中的选项卡的字体颜色为白色，并且设置过渡效果。

.wrapper nav #comment:checked~.tab {
    left: 20%;
}

.wrapper nav #envelope:checked~.tab {
    left: 40%;
}

.wrapper nav #heart:checked~.tab {
    left: 60%;
}

.wrapper nav #user:checked~.tab {
    left: 80%;
}

这段代码是设置选中的选项卡的滑块的位置。当选中 "comment" 选项卡时，滑块会向右移动20%的距离，以此类推。