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);
    }
}
相关推荐
elangyipi1233 分钟前
深入理解前端项目中的 package.json 和 package-lock.json
前端·json
LYFlied16 分钟前
【算法解题模板】-【回溯】----“试错式”问题解决利器
前端·数据结构·算法·leetcode·面试·职场和发展
composurext16 分钟前
录音切片上传
前端·javascript·css
程序员小寒16 分钟前
前端高频面试题：深拷贝和浅拷贝的区别？
前端·javascript·面试
狮子座的男孩21 分钟前
html+css基础：07、css2的复合选择器_伪类选择器(概念、动态伪类、结构伪类(核心)、否定伪类、UI伪类、目标伪类、语言伪类)及伪元素选择器
前端·css·经验分享·html·伪类选择器·伪元素选择器·结构伪类
zhougl99622 分钟前
Vue 中的 `render` 函数
前端·javascript·vue.js
听风吟丶24 分钟前
Spring Boot 自动配置深度解析：原理、实战与源码追踪
前端·bootstrap·html
跟着珅聪学java24 分钟前
HTML中设置＜select＞下拉框默认值的详细教程
开发语言·前端·javascript
IT_陈寒25 分钟前
JavaScript 性能优化：5个被低估的V8引擎技巧让你的代码提速50%
前端·人工智能·后端
想睡好31 分钟前
setup
前端·javascript·html
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03Linux下V2Ray安装配置指南04在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）05BongoCat - 跨平台键盘猫动画工具06安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）07【AutoGLM部署】本地私有化部署AI手机Agent08Neo4j（一） - Neo4j安装教程（Windows）09Open-AutoGLM Windows 安装部署教程10Cursor 又偷偷更新，这个功能太实用：Visual Editor for Cursor Browser