css实现一个弹出式圆弧导航菜单效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现一个弹出式圆弧导航菜单效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>Circular menu</title>

    <!-- Menu styles -->
    <style>
        body {
        padding:0;
        margin:0;
        background-color:#392338;
        color:#fff
}
body * {
        box-sizing:border-box
}
.hamburger {
        position:relative;
        width:20px;
        transition:all .333333333333333s ease
}
.hamburger,.hamburger:after,.hamburger:before {
        content:" ";
        border:2px solid #392338;
        border-radius:5px
}
.hamburger:after,.hamburger:before {
        position:absolute;
        left:50%;
        width:100%;
        -webkit-transform:translateX(-50%);
        transform:translateX(-50%);
        transition-property:top,bottom,-webkit-transform;
        transition-property:top,bottom,transform;
        transition-property:top,bottom,transform,-webkit-transform;
        transition-duration:1s,1s,.25s
}
.hamburger:after {
        top:-8px
}
.hamburger:before {
        bottom:-8px
}
.circle {
        position:relative;
        padding:0;
        margin:0;
        height:100%;
        width:100%;
        background-color:#fff;
        border-radius:50%;
        -webkit-transform:rotate(108deg);
        transform:rotate(108deg);
        overflow:hidden;
        list-style:none
}
.circle li {
        position:absolute;
        top:0;
        right:0;
        width:50%;
        height:50%;
        -webkit-transform-origin:0 100%;
        transform-origin:0 100%
}
.circle li .placeholder {
        position:absolute;
        left:-100%;
        padding-top:1.5em;
        padding-top:26.666666666666668px;
        width:200%;
        height:200%;
        text-align:center;
        -webkit-transform:skewY(54deg) rotate(18deg);
        transform:skewY(54deg) rotate(18deg)
}
.circle li .placeholder .upside {
        -webkit-transform:rotate(180deg);
        transform:rotate(180deg)
}
.circle li .placeholder a {
        text-decoration:none;
        pointer-events:auto
}
.circle li .placeholder button {
        pointer-events:auto
}
.circle li .placeholder .button {
        font-size:2.3em;
        font-size:36.83241252302026px;
        background-color:transparent;
        border:none;
        color:#392338;
        cursor:pointer
}
.circle li:first-child {
        -webkit-transform:rotate(0deg) skewY(-54deg);
        transform:rotate(0deg) skewY(-54deg);
        background-color:#fff
}
.circle li:nth-child(2) {
        -webkit-transform:rotate(36deg) skewY(-54deg);
        transform:rotate(36deg) skewY(-54deg);
        background-color:#fff
}
.circle li:nth-child(3) {
        -webkit-transform:rotate(72deg) skewY(-54deg);
        transform:rotate(72deg) skewY(-54deg);
        background-color:#fff
}
.circle li:nth-child(4) {
        -webkit-transform:rotate(108deg) skewY(-54deg);
        transform:rotate(108deg) skewY(-54deg);
        background-color:#fff
}
.circle li:nth-child(5) {
        -webkit-transform:rotate(144deg) skewY(-54deg);
        transform:rotate(144deg) skewY(-54deg);
        background-color:#fff
}
.circle li:nth-child(6) {
        -webkit-transform:rotate(180deg) skewY(-54deg);
        transform:rotate(180deg) skewY(-54deg);
        background-color:#fff
}
.circle li:nth-child(7) {
        -webkit-transform:rotate(216deg) skewY(-54deg);
        transform:rotate(216deg) skewY(-54deg);
        background-color:#fff
}
.circle li:nth-child(8) {
        -webkit-transform:rotate(252deg) skewY(-54deg);
        transform:rotate(252deg) skewY(-54deg);
        background-color:#fff
}
.circle li:nth-child(9) {
        -webkit-transform:rotate(288deg) skewY(-54deg);
        transform:rotate(288deg) skewY(-54deg);
        background-color:#fff
}
.circle li:nth-child(10) {
        -webkit-transform:rotate(324deg) skewY(-54deg);
        transform:rotate(324deg) skewY(-54deg);
        background-color:#fff
}
.koc-menu {
        pointer-events:none
}
.koc-menu--circle {
        position:relative;
        z-index:3;
        width:260px;
        height:260px;
        overflow:hidden
}
.koc-menu .icon {
        position:absolute;
        -webkit-transform:translateX(-50%) translateY(-50%);
        transform:translateX(-50%) translateY(-50%)
}
.koc-menu input[type=radio] {
        position:fixed;
        top:-99999px;
        left:-99999px
}
.koc-menu__active {
        position:absolute
}
.koc-menu__toggle {
        z-index:2;
        position:absolute;
        width:200px;
        height:200px;
        background-color:#fff;
        border-radius:50%;
        transition:-webkit-transform 1.3s;
        transition:transform 1.3s;
        transition:transform 1.3s,-webkit-transform 1.3s;
        cursor:pointer;
        pointer-events:auto;
        box-shadow:0 0 10px rgba(0,0,0,.6)
}
.koc-menu__toggle:active,.koc-menu__toggle:focus {
        -webkit-tap-highlight-color:rgba(0,0,0,0);
        -webkit-tap-highlight-color:transparent
}
.koc-menu__listings {
        z-index:1;
        position:absolute;
        width:400px;
        height:400px;
        border-radius:50%;
        -webkit-transform:scale(.1) rotate(150deg);
        transform:scale(.1) rotate(150deg);
        transition:-webkit-transform 1s;
        transition:transform 1s;
        transition:transform 1s,-webkit-transform 1s;
        box-shadow:0 0 10px rgba(0,0,0,.6)
}
.koc-menu__arrow {
        visibility:hidden;
        position:absolute
}
.koc-menu__arrow ul {
        padding:0;
        margin:0;
        list-style:none
}
.koc-menu .icon {
        top:70%;
        left:70%
}
.koc-menu .koc-menu__toggle {
        top:-100px;
        left:-100px
}
.koc-menu .koc-menu__listings {
        top:-200px;
        left:-200px
}
.koc-menu .koc-menu__arrow {
        -webkit-transform:rotate(-45deg);
        transform:rotate(-45deg)
}
.koc-menu .koc-menu__arrow--top {
        top:.5em;
        left:220px
}
.koc-menu #koc-menu__active:checked~label .koc-menu__listings .circle {
        -webkit-transform:rotate(-170deg);
        transform:rotate(-170deg)
}
.koc-menu--top-right .icon {
        top:70%;
        left:30%
}
.koc-menu--top-right .koc-menu__toggle {
        top:-100px;
        left:160px
}
.koc-menu--top-right .koc-menu__listings {
        top:-200px;
        left:60px
}
.koc-menu--top-right .koc-menu__arrow {
        -webkit-transform:rotate(-45deg);
        transform:rotate(-45deg)
}
.koc-menu--top-right .koc-menu__arrow--top {
        top:.5em;
        left:20px
}
.koc-menu--top-right #koc-menu__active:checked~label .koc-menu__listings .circle {
        -webkit-transform:rotate(-79deg);
        transform:rotate(-79deg)
}
.koc-menu--bottom-left .circle .placeholder .upside {
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg)
}
.koc-menu--bottom-left .icon {
        top:30%;
        left:70%
}
.koc-menu--bottom-left .koc-menu__toggle {
        top:160px;
        left:-100px
}
.koc-menu--bottom-left .koc-menu__listings {
        top:60px;
        left:-200px
}
.koc-menu--bottom-left .koc-menu__arrow {
        -webkit-transform:rotate(-135deg);
        transform:rotate(-135deg);
        transition:all .1 ease;
        transition-delay:0
}
.koc-menu--bott.........完整代码请登录后点击上方下载按钮下载查看