.demo {
    padding: 0 0;
    transform: translate3d(0, 0, 0);
}
.navbar {
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: #fff;
    margin: 0 auto;
    position: relative;
    cursor: pointer;
    text-align: center;
    font-size: 1.75em;
    font-weight: bold;
    color: #383838;
    transition: 0.24s 0.2s;
}
.navbar:hover {
    background: rgba(255, 255, 255, 0.75);
}
.navbar .navbar_img{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    overflow: hidden;
}
.navbar .navbar_img img{
    width: auto;
    height: 100%;
}
.navbar .menu {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: -90px;
    left: -90px;
    border: 350px solid transparent;
    cursor: default;
    border-radius: 50%;
    transform: scale(0);
    transition: transform 1.4s 0.07s;
    z-index: -1;
}
.navbar:hover .menu {
    transition: transform 0.4s 0.08s, z-index 0s 0.5s;
    transform: scale(1);
    z-index: 1;
}
.navbar .menu li {
    position: absolute;
    top: -240px;
    left: -240px;
    transform-origin: 230px 230px;
    transition: all 0.5s 0.1s;
}
.navbar:hover .menu li {
    transition: all 0.6s;
}
.navbar .menu li a {
	transition:all .4s ease 0s;
    width: 45px;
    height: 45px;
    line-height: 45px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    font-size: 60%;
    color: #99b977;
    transition: 0.6s;
    text-decoration: none;
}
.navbar .menu .menu_lis a{
    background-color: #2860F8;
    color: #fff;
}
.navbar .menu li a:hover {
    background-color: #2860F8;
    color: #fff;
}
.navbar:hover .menu li:nth-child(1) {
    transition-delay: 0.02s;
    transform: rotate(85deg);
}
.navbar:hover .menu li:nth-child(1) a {
    transition-delay: 0.04s;
    transform: rotate(635deg);
}
.navbar:hover .menu li:nth-child(2) {
    transition-delay: 0.04s;
    transform: rotate(125deg);
}
.navbar:hover .menu li:nth-child(2) a {
    transition-delay: 0.08s;
    transform: rotate(595deg);
}
.navbar:hover .menu li:nth-child(3) {
    transition-delay: 0.06s;
    transform: rotate(165deg);
}
.navbar:hover .menu li:nth-child(3) a {
    transition-delay: 0.12s;
    transform: rotate(555deg);
}
.navbar:hover .menu li:nth-child(4) {
    transition-delay: 0.08s;
    transform: rotate(205deg);
}
.navbar:hover .menu li:nth-child(4) a {
    transition-delay: 0.16s;
    transform: rotate(515deg);
}
.navbar:hover .menu li:nth-child(5) {
    transition-delay: 0.1s;
    transform: rotate(245deg);
}
.navbar:hover .menu li:nth-child(5) a {
    transition-delay: 0.2s;
    transform: rotate(475deg);
}
.navbar:hover .menu li:nth-child(6) {
    transition-delay: 0.12s;
    transform: rotate(285deg);
}
.navbar:hover .menu li:nth-child(6) a {
    transition-delay: 0.24s;
    transform: rotate(435deg);
}
.navbar:hover .menu li:nth-child(7) {
    transition-delay: 0.14s;
    transform: rotate(325deg);
}
.navbar:hover .menu li:nth-child(7) a {
    transition-delay: 0.28s;
    transform: rotate(395deg);
}
.navbar:hover .menu li:nth-child(8) {
    transition-delay: 0.16s;
    transform: rotate(365deg);
}
.navbar:hover .menu li:nth-child(8) a {
    transition-delay: 0.32s;
    transform: rotate(355deg);
}
.navbar:hover .menu li:nth-child(9) {
    transition-delay: 0.18s;
    transform: rotate(405deg);
}
.navbar:hover .menu li:nth-child(9) a {
    transition-delay: 0.36s;
    transform: rotate(315deg);
}


@media (max-width:767px) {
    .demo{padding-left: 60px;}
    .navbar{width: 230px;height: 230px;}
    .navbar .menu{border: 200px solid transparent;top: -120px; left: -120px;z-index: 3;transform: scale(1);}
    .navbar .menu li{top: -90px;left: -90px;transform-origin: 125px 125px;}
    .navbar .menu li:nth-child(1) {
        transition-delay: 0.02s;
        transform: rotate(85deg);
    }
    .navbar .menu li:nth-child(1) a {
        transition-delay: 0.04s;
        transform: rotate(635deg);
    }
    .navbar .menu li:nth-child(2) {
        transition-delay: 0.04s;
        transform: rotate(125deg);
    }
    .navbar .menu li:nth-child(2) a {
        transition-delay: 0.08s;
        transform: rotate(595deg);
    }
    .navbar .menu li:nth-child(3) {
        transition-delay: 0.06s;
        transform: rotate(165deg);
    }
    .navbar .menu li:nth-child(3) a {
        transition-delay: 0.12s;
        transform: rotate(555deg);
    }
    .navbar .menu li:nth-child(4) {
        transition-delay: 0.08s;
        transform: rotate(205deg);
    }
    .navbar .menu li:nth-child(4) a {
        transition-delay: 0.16s;
        transform: rotate(515deg);
    }
    .navbar .menu li:nth-child(5) {
        transition-delay: 0.1s;
        transform: rotate(245deg);
    }
    .navbar .menu li:nth-child(5) a {
        transition-delay: 0.2s;
        transform: rotate(475deg);
    }
    .navbar .menu li:nth-child(6) {
        transition-delay: 0.12s;
        transform: rotate(285deg);
    }
    .navbar .menu li:nth-child(6) a {
        transition-delay: 0.24s;
        transform: rotate(435deg);
    }
    .navbar .menu li:nth-child(7) {
        transition-delay: 0.14s;
        transform: rotate(325deg);
    }
    .navbar .menu li:nth-child(7) a {
        transition-delay: 0.28s;
        transform: rotate(395deg);
    }
    .navbar .menu li:nth-child(8) {
        transition-delay: 0.16s;
        transform: rotate(365deg);
    }
    .navbar .menu li:nth-child(8) a {
        transition-delay: 0.32s;
        transform: rotate(355deg);
    }
    .navbar .menu li:nth-child(9) {
        transition-delay: 0.18s;
        transform: rotate(405deg);
    }
    .navbar .menu li:nth-child(9) a {
        transition-delay: 0.36s;
        transform: rotate(315deg);
    }
}

@media (min-width:768px) and (max-width:991px) {

}

@media (min-width:992px) and (max-width:1024px) {

}

@media (min-width:1025px) and (max-width:1280px) {
    .demo{padding-left: 50px;}
    .navbar{width: 280px;height: 280px;}
    .navbar .menu{border: 200px solid transparent;}
    .navbar .menu li{top: -115px;left: -115px;transform-origin: 145px 145px;}
}

@media (min-width:1281px) and (max-width:1440px) {
    .demo{padding-left: 50px;}
    .navbar{width: 400px;height: 400px;}
    .navbar .menu{border: 300px solid transparent;}
    .navbar .menu li{top: -200px;left: -200px;transform-origin: 190px 190px;}
}

@media (min-width:1441px) and (max-width:1660px) {
    .demo{padding-left: 50px;}
    .navbar{width: 400px;height: 400px;}
    .navbar .menu{border: 300px solid transparent;}
    .navbar .menu li{top: -200px;left: -200px;transform-origin: 190px 190px;}
    
}