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);
    }
}
相关推荐
小J听不清8 分钟前
CSS 外边距（margin）全解析：取值规则 + 实战用法
前端·javascript·css·html·css3
还是大剑师兰特29 分钟前
Stats.js 插件详解及示例（完全攻略）
前端·大剑师·stats
前端小超超30 分钟前
Vue计算属性computed：可写与只读的区别
前端·javascript·vue.js
IT_陈寒1 小时前
SpringBoot实战：3个隐藏技巧让你的应用性能飙升50%
前端·人工智能·后端
weixin199701080161 小时前
唯品会商品详情页前端性能优化实战
前端·性能优化
爱学习的程序媛1 小时前
【Web前端】Pinia状态管理详解
前端·vue.js·typescript
爱学习的程序媛2 小时前
“数字孪生”详解与前端技术栈
前端·人工智能·计算机视觉·智慧城市·信息与通信
海石2 小时前
微信小程序开发02：原始人也能看懂的着色器与视频处理
前端·微信小程序·视频编码
程序员Sunday2 小时前
Claude Code 生态爆发：5个必知的新工具
前端·人工智能·后端
ChoSeitaku2 小时前
NO.2|proto3语法|消息类型|通讯录|文件读取|enum类型
java·服务器·前端
热门推荐
01GitHub 镜像站点02Qwen3.5 开源全解析：从 0.8B 到 397B，代际升级 + 全场景选型指南03小黑课堂计算机二级WPSoffice题库软件下载安装教程（2026年3月最新版）04OpenClaw 使用和管理 MCP 完全指南05Labelme从安装到标注：零基础完整指南06班级宠物园部署指南07UV安装并设置国内源08AI 编程三剑客：Spec-Kit、OpenSpec、Superpowers 深度对比与实战指南09OpenClaw Control UI安全上下文访问配置10“wsl --install -d Ubuntu-22.04”下载慢，中国地区离线安装 Ubuntu 22.04 WSL方法（亲测2025年5月6日）