css折叠的导航栏

四岁爱上了她2024-05-06 21:21

导航栏点击多个的效果

html 复制代码 
<div class="cont">
        <!-- 第一个导航 -->
        <div class="nav_a">
            <input type="checkbox" name="chk" id="chk1">
            <label for="chk1">
                <div class="plus">
                    <img src="./images/plus.png" alt="">
                </div>
            </label>
            <div class="location">
                <img src="./images/location.png" alt="">
            </div>
            <div class="message">
                <img src="./images/message.png" alt="">
            </div>
            <div class="phone">
                <img src="./images/phone.png" alt="">
            </div>
            <div class="share">
                <img src="./images/share.png" alt="">
            </div>
        </div>
        <!-- 第二个导航 -->
        <div class="nav_b">
            <input type="checkbox" name="chk2" id="chk2">
            <label for="chk2">
                <div class="plus">
                    <img src="./images/plus.png" alt="">
                </div>
            </label>
            <div class="location">
                <img src="./images/location.png" alt="">
            </div>
            <div class="message">
                <img src="./images/message.png" alt="">
            </div>
            <div class="phone">
                <img src="./images/phone.png" alt="">
            </div>
            <div class="share">
                <img src="./images/share.png" alt="">
            </div>
            <div class="location2">
                <img src="./images/location.png" alt="">
            </div>
            <div class="message2">
                <img src="./images/message.png" alt="">
            </div>
        </div>

        <!-- 第三个导航 -->
        <div class="nav_c">
            <input type="checkbox" name="chk3" id="chk3">
            <label for="chk3">
                <div class="plus">
                    <img src="./images/plus.png" alt="">
                </div>
            </label>
            <div class="location3 icon">
                <img src="./images/location.png" alt="">
            </div>
            <div class="message5 icon">
                <img src="./images/message.png" alt="">
            </div>
            <div class="phone icon">
                <img src="./images/phone.png" alt="">
            </div>
            <div class="share5 icon">
                <img src="./images/share.png" alt="">
            </div>
            <div class="phone2 icon">
                <img src="./images/phone.png" alt="">
            </div>
            <div class="message3 icon">
                <img src="./images/message.png" alt="">
            </div>
        </div>
        <!-- 第四个导航 -->
        <div class="nav_d">
            <input type="checkbox" name="chk4" id="chk4">
            <label for="chk4">
                <div class="plus">
                    <img src="./images/plus.png" alt="">
                </div>
            </label>
            <div class="location">
                <img src="./images/location.png" alt="">
            </div>
            <div class="message">
                <img src="./images/message.png" alt="">
            </div>
            <div class="phone">
                <img src="./images/phone.png" alt="">
            </div>
            <div class="share">
                <img src="./images/share.png" alt="">
            </div>
        </div>
        <!-- 第五个导航 -->
        <div class="nav_e">
            <input type="checkbox" name="chk5" id="chk5">
            <label for="chk5">
                <div class="plus">
                    <img src="./images/plus.png" alt="">
                </div>
            </label>
            <div class="location">
                <img src="./images/location.png" alt="">
            </div>
            <div class="message">
                <img src="./images/message.png" alt="">
            </div>
            <div class="phone">
                <img src="./images/phone.png" alt="">
            </div>
            <div class="share">
                <img src="./images/share.png" alt="">
            </div>
        </div>
        <!-- 第六个导航 -->
        <div class="nav_f">
            <input type="checkbox" name="chk6" id="chk6">
            <label for="chk6">
                <div class="plus">
                    <img src="./images/plus.png" alt="">
                </div>
            </label>
            <div class="location">
                <img src="./images/location.png" alt="">
            </div>
            <div class="message">
                <img src="./images/message.png" alt="">
            </div>
            <div class="phone">
                <img src="./images/phone.png" alt="">
            </div>
            <div class="share">
                <img src="./images/share.png" alt="">
            </div>
        </div>
    </div>
css 复制代码 
.cont {
    width: 810px;
    height: 578px;
    background-color: #eceff1;
}

input {
    display: none;
}

/* 第一个导航 */
.nav_a {
    width: 270px;
    height: 250px;
    float: left;
}

.nav_a div {
    width: 50px;
    height: 50px;
    background-color: red;
    border-radius: 50%;
    text-align: center;
    line-height: 55px;
    position: absolute;
    top: 100px;
    left: 100px;
    transition: 1s;
}

.nav_a .plus {
    z-index: 999;
}

.nav_a img {
    width: 20px;
    height: 20px;
}

.nav_a div:hover {
    transform: scale(1.2);
}

.nav_a input[name="chk"]:checked~label>.plus {
    transform: rotate(45deg) scale(0.7);
}

.nav_a input[name="chk"]:checked~.location {
    transform: translate(-80px, -70px) rotate(360deg);
}

.nav_a input[name="chk"]:checked~.message {
    transform: translate(80px, -70px) rotate(360deg);
}

.nav_a input[name="chk"]:checked~.phone {
    transform: translate(-80px, 70px) rotate(360deg);
}

.nav_a input[name="chk"]:checked~.share {
    transform: translate(80px, 70px) rotate(360deg);
}

/* 第二个导航 */
.nav_b {
    width: 270px;
    height: 250px;
    float: left;
}

.nav_b div {
    width: 50px;
    height: 50px;
    background-color: red;
    border-radius: 50%;
    text-align: center;
    line-height: 55px;
    position: absolute;
    top: 100px;
    left: 370px;
    transition: 1s;
}

.nav_b .plus {
    z-index: 999;
}

.nav_b img {
    width: 20px;
    height: 20px;
}

.nav_b div:hover {
    transform: scale(1.2);
}

.nav_b input[name="chk2"]:checked~label>.plus {
    transform: rotate(45deg) scale(0.7);
}

.nav_b input[name="chk2"]:checked~.location {
    transform: translate(-70px, -40px) rotate(360deg);
}

.nav_b input[name="chk2"]:checked~.message {
    transform: translate(70px, -40px) rotate(360deg);
}

.nav_b input[name="chk2"]:checked~.phone {
    transform: translate(-70px, 40px) rotate(360deg);
}

.nav_b input[name="chk2"]:checked~.share {
    transform: translate(70px, 40px) rotate(360deg);
}

.nav_b input[name="chk2"]:checked~.location2 {
    transform: translate(0px, -70px) rotate(360deg);
}

.nav_b input[name="chk2"]:checked~.message2 {
    transform: translate(0px, 70px) rotate(360deg);
}


/* 第三个导航 */
.nav_c {
    width: 270px;
    height: 250px;
    float: left;
}

.nav_c .plus {
    width: 50px;
    height: 50px;
    background-color: red;
    border-radius: 50%;
    text-align: center;
    line-height: 55px;
    position: absolute;
    top: 100px;
    left: 650px;
    transition: 1s;
}

.nav_c .icon {
    width: 50px;
    height: 50px;
    background-color: red;
    border-radius: 50%;
    text-align: center;
    line-height: 55px;
    position: absolute;
    top: 100px;
    left: 650px;
    transition: 1s;
}

.nav_c .plus {
    z-index: 999;
}

.nav_c img {
    width: 20px;
    height: 20px;
}

.nav_c div:hover {
    transform: scale(1.2);
}

.nav_c input[name="chk3"]:checked~label>.plus {
    transform: rotate(45deg) scale(0.7);
}

.nav_c input[name="chk3"]:checked~.location3 {
    animation: location3 1s linear forwards;
}

@keyframes location3 {
    0% {
        transform: translateY(-70px) rotate(0deg);
    }

    100% {
        transform: translateY(-70px) rotate(0deg);
    }
}

.nav_c input[name="chk3"]:checked~.message5 {
    animation: message5 1s linear forwards;
}

@keyframes message5 {
    0% {
        transform: translateY(-70px) rotate(0deg);
        transform-origin: 25px 95px;
    }

    100% {
        transform: translateY(-70px) rotate(180deg);
        transform-origin: 25px 95px;
    }
}

.nav_c input[name="chk3"]:checked~.phone {
    animation: phone 1s linear forwards;
}

@keyframes phone {
    0% {
        transform: translateY(-70px) rotate(0deg);
        transform-origin: 25px 95px;
    }

    100% {
        transform: translateY(-70px) rotate(125deg);
        transform-origin: 25px 95px;
    }
}

.nav_c input[name="chk3"]:checked~.share5 {
    animation: share5 1s linear forwards;
}

@keyframes share5 {
    0% {
        transform: translateY(-70px) rotate(0deg);
        transform-origin: 25px 95px;
    }

    100% {
        transform: translateY(-70px) rotate(60deg);
        transform-origin: 25px 95px;
    }
}

.nav_c input[name="chk3"]:checked~.phone2 {
    animation: phone2 1s linear forwards;
}

@keyframes phone2 {
    0% {
        transform: translateY(-70px) rotate(0deg);
        transform-origin: 25px 95px;
    }

    100% {
        transform: translateY(-70px) rotate(235deg);
        transform-origin: 25px 95px;
    }
}

.nav_c input[name="chk3"]:checked~.message3 {
    animation: message3 1s linear forwards;
}

@keyframes message3 {
    0% {
        transform: translateY(-70px) rotate(0deg);
        transform-origin: 25px 95px;
    }

    100% {
        transform: translateY(-70px) rotate(295deg);
        transform-origin: 25px 95px;
    }
}

/* 第四个导航 */
.nav_d {
    width: 270px;
    height: 250px;
    float: left;
}

.nav_d div {
    width: 50px;
    height: 50px;
    background-color: red;
    border-radius: 50%;
    text-align: center;
    line-height: 55px;
    position: absolute;
    top: 350px;
    left: 100px;
    transition: 1s;
}

.nav_d .plus {
    z-index: 999;
}

.nav_d img {
    width: 20px;
    height: 20px;
}

.nav_d div:hover {
    transform: scale(1.2);
}

.nav_d input[name="chk4"]:checked~label>.plus {
    transform: rotate(45deg) scale(0.7);
}

.nav_d input[name="chk4"]:checked~.location {
    transform: translate(-100px, -60px) rotate(360deg);
}

.nav_d input[name="chk4"]:checked~.message {
    transform: translate(-40px, -60px) rotate(360deg);
}

.nav_d input[name="chk4"]:checked~.phone {
    transform: translate(20px, -60px) rotate(360deg);
}

.nav_d input[name="chk4"]:checked~.share {
    transform: translate(80px, -60px) rotate(360deg);
}


/* 第五个导航 */
.nav_e {
    width: 270px;
    height: 250px;
    float: left;
}

.nav_e div {
    width: 50px;
    height: 50px;
    background-color: red;
    border-radius: 50%;
    text-align: center;
    line-height: 55px;
    position: absolute;
    top: 350px;
    left: 370px;
    transition: 1s;
}

.nav_e .plus {
    z-index: 999;
}

.nav_e img {
    width: 20px;
    height: 20px;
}

.nav_e div:hover {
    transform: scale(1.2);
}

.nav_e input[name="chk5"]:checked~label>.plus {
    transform: rotate(45deg) scale(0.9);
}

.nav_e input[name="chk5"]:checked~.location {
    transform: translateX(-60px) rotate(360deg);
}

.nav_e input[name="chk5"]:checked~.message {
    transform: translateX(-115px) rotate(360deg);
}

.nav_e input[name="chk5"]:checked~.phone {
    transform: translateX(60px) rotate(360deg);
}

.nav_e input[name="chk5"]:checked~.share {
    transform: translateX(115px) rotate(360deg);
}

.message,.share{
    transition-delay: 0.5s;
}

/* 第六个导航 */
.nav_f {
    width: 270px;
    height: 250px;
    float: left;
}

.nav_f div {
    width: 50px;
    height: 50px;
    background-color: red;
    border-radius: 50%;
    text-align: center;
    line-height: 55px;
    position: absolute;
    top: 350px;
    left: 650px;
    transition:  1s;
}

.nav_f .plus {
    z-index: 999;
}

.nav_f img {
    width: 20px;
    height: 20px;
}

.nav_f div:hover {
    transform: scale(1.2);
}

.nav_f input[name="chk6"]:checked~label>.plus {
    transform: rotate(45deg) scale(0.9);
}

.nav_f input[name="chk6"]:checked~.location {
    transform: translateX(-60px);
}

.nav_f input[name="chk6"]:checked~.message {
    animation: message 0.5s linear forwards;
}

@keyframes message {
    0% {
        transform: translateX(-60px);
    }

    100% {
        transform: translateX(-115px);
    }
}

.nav_f input[name="chk6"]:checked~.phone {
    transform: translateX(60px);
}

.nav_f input[name="chk6"]:checked~.share {
    animation: share 0.5s linear forwards;
}

@keyframes share {
    0% {
        transform: translateX(60px);
    }

    100% {
        transform: translateX(115px);
    }
}
相关推荐
灵析表格6 分钟前
灵析表格功能函数深度分析报告
前端·数据库·microsoft
breeze jiang12 分钟前
React useRef + Web Worker：避免大计算阻塞页面的通信方案
前端·javascript·react.js
fthux23 分钟前
MCP协议开发实战：从零搭建AI Agent工具链
前端·人工智能·ai·开源·github
codeGoogle9 小时前
自研 IM 还是选择第三方 SDK？企业开发者应该如何权衡？
前端·后端·程序员
用户9385156350711 小时前
React Context 与自定义 Hook 从底层到实践：「跨层级通信 + 副作用封装」全解析
前端·javascript·react.js
滴滴答答哒11 小时前
VUE3+element-plus MultiSelect 多选下拉组件
前端·javascript·vue.js
其美杰布-富贵-李11 小时前
04 watch 与 Vue 响应式数据流
前端·javascript·vue.js
赵大仁13 小时前
生成式 UI 实战：用 JSON Schema + React 动态渲染 AI 界面
前端·ai·react·next.js·前端架构·生成式ui
kyriewen14 小时前
我排查了一个React内存泄漏——罪魁祸首是这3个被忽略的清理函数
前端·javascript·面试
热门推荐
01如何新建文件夹？ 电脑新建文件夹的4种方法02GitHub 镜像站点03国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）04AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路052026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？06Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费07微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新08历年考研数学一、数学二、数学三真题试卷及答案PDF092026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片1000 Debian字符界面如何支持中文