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);
    }
}
相关推荐
静小谢1 小时前
前后台一起部署，vite配置笔记base\build
前端·javascript·笔记
用户47949283569151 小时前
改了CSS刷新没反应-你可能不懂HTTP缓存
前端·javascript·面试
还好还好不是吗1 小时前
老项目改造 vue-cli 2.6 升级 rsbuild 提升开发效率300% upupup！！！
前端·性能优化
sumAll1 小时前
别再手动对齐矩形了！这个开源神器让 AI 帮你画架构图 (Next-AI-Draw-IO 体验)
前端·人工智能·next.js
OpenTiny社区1 小时前
2025OpenTiny星光ShowTime！年度贡献者征集启动！
前端·vue.js·低代码
wangan0942 小时前
不带圆圈的二叉树
java·前端·javascript
狗哥哥2 小时前
从零到一：打造企业级 Vue 3 高性能表格组件的设计哲学与实践
前端·vue.js·架构
疯狂平头哥2 小时前
微信小程序真机预览-数字不等宽如何解决
前端
Drift_Dream2 小时前
前端趣味交互：如何精准判断鼠标从哪个方向进入元素？
前端
hqk2 小时前
鸿蒙ArkUI：状态管理、应用结构、路由全解析
android·前端·harmonyos
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03Linux下V2Ray安装配置指南04在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）05【AutoGLM部署】本地私有化部署AI手机Agent06Open-AutoGLM Windows 安装部署教程07Cursor 又偷偷更新，这个功能太实用：Visual Editor for Cursor Browser08安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）09Labelme从安装到标注：零基础完整指南10BongoCat - 跨平台键盘猫动画工具