css折叠的导航栏

  • 开发
  • 26

导航栏点击多个的效果

<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>


.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. css折叠的导航栏

    2024-04-29 11:52:03       27 阅读

  6. CSS 导航栏：设计、定制与优化

    2024-04-29 11:52:03       26 阅读

  8. 构建响应式CSS导航栏：实现优雅的用户体验

    2024-04-29 11:52:03       25 阅读

  10. css基础之用户界面样式、导航栏和三角

    2024-04-29 11:52:03       36 阅读

最近更新

  3. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-29 11:52:03       94 阅读

  4. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-29 11:52:03       100 阅读

  9. 在Django里面运行非项目文件

    2024-04-29 11:52:03       82 阅读

  19. Python语言-面向对象

    2024-04-29 11:52:03       91 阅读

  20. 如何分清楚常见的 Git 分支管理策略Git Flow、GitHub Flow 和 GitLab Flow

    2024-04-29 11:52:03       85 阅读

热门阅读

  1. 生成WHL或压缩包安装文件，发布到PYPI

    2024-04-29 11:52:03       26 阅读

  2. 在 Web3 方向有哪些工作，需要掌握哪些知识呢？

    2024-04-29 11:52:03       35 阅读

  3. 力扣经典150题第四十八题：合并区间

    2024-04-29 11:52:03       28 阅读

  5. Qt在已存在的控件上绘图

    2024-04-29 11:52:03       30 阅读

  7. day17面向对象三大特征—封装

    2024-04-29 11:52:03       23 阅读

  8. 建网站一般需要多少钱

    2024-04-29 11:52:03       32 阅读

  27. k8s笔记 | Service 服务

    2024-04-29 11:52:03       34 阅读