<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);}
}