【无标题】

js 底部导航栏切换（炫酷效果）

在这里插入图片描述

直接上代码

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<style>
    :root{
        --color:#222327;
    }
    *{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    body{
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: var(--color);
    }
    .container{
        width: 440px;
        height: 70px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        position: relative;
    }
    .item{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100px;
        
    }
    img{
        width: 30px;
        height: 30px;
        position: absolute;
        font-size: 1.7em;
        transition: .5s;
    }
    .text{
        transform: translateY(20px);
        font-size: 0.75em;
        font-weight: bold;
        transition: .5s;
        opacity: 0;
    }
    .item.active img{
        transform: translateY(-32px);
        z-index: 1;
    }
    .item.active .text{
        opacity: 1;
        transform: translateY(10px);
    }
    .indicator{
        position: absolute;
        width: 70px;
        height: 70px;
        background: rgb(18, 212, 50);
        left:35px;
        top:-50%;
        border-radius: 50%;
        border:6px solid var(--color);
        transition: .5s;
    }
    .indicator::before{
        content: '';
        position: absolute;
        top: 50%;
        left: -22px;
        width: 20px;
        height: 20px;
        background: transparent;
        border-top-right-radius: 20px;
        box-shadow: 0 -10px 0 0 var(--color);
    }
    .indicator::after{
        content: '';
        position: absolute;
        top: 50%;
        right: -22px;
        width: 20px;
        height: 20px;
        background: transparent;
        border-top-left-radius: 20px;
        box-shadow: 0 -10px 0 0 var(--color);
    }
    .item:nth-child(1).active ~ .indicator {
        transform:translateX(calc(100px  * 0));
    }
    .item:nth-child(2).active ~ .indicator {
        transform:translateX(calc(100px  * 1));
    }
    .item:nth-child(3).active ~ .indicator {
        transform:translateX(calc(100px  * 2));
    }
    .item:nth-child(4).active ~ .indicator {
        transform:translateX(calc(100px  * 3));
    }
style>
<body>
    <div class="container">
        <div class="item active">
            <img src="https://s1.ax1x.com/2022/04/23/LffnC8.png" alt="">
            <div class="text">首页div>
        div>
        <div class="item">
            <img src="https://s1.ax1x.com/2022/04/23/Lffu8S.png" alt="">
            <div class="text">分类div>
        div>
        <div class="item">
            <img src="https://s1.ax1x.com/2022/04/23/LffKgg.png" alt="">
            <div class="text">更多div>
        div>
        <div class="item">
            <img src="https://s1.ax1x.com/2022/04/23/LffMvQ.png" alt="">
            <div class="text">我的div>
        div>
        <div class="indicator">div>
    div>
body>
<script>
    const list = document.querySelectorAll('.item')
    console.log(list);
    function activeLike(){
        list.forEach((item) => 
            item.classList.remove('active'))
        this.classList.add('active')
    }
    list.forEach((item) =>  item.addEventListener('click',activeLike))
script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142

相关阅读:
直播回顾｜多云时代，如何建设企业级云管理平台？
【MM小贴士】关于SAP系统中关税的处理方式
 测试用例基础
 【命令行魔法：掌握Linux基础工具开发的独门技艺】
用 Kafka + DolphinDB 实时计算K线
 ubuntu 查看5000端口是否开放
 【Linux系统移植】系统烧写方式
 [old]TeamDev DotNetBrowser Crack
【Python入门与进阶】Anaconda环境配置
 【JAVA学习笔记】39 - final关键字
原文地址：https://blog.csdn.net/Vue1024/article/details/126901997

【无标题】

js 底部导航栏切换 （炫酷效果）

直接上代码

js 底部导航栏切换（炫酷效果）