css实现一个弹出式圆弧导航菜单效果代码
代码语言: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--bottom-left .koc-menu__arrow--top { top:20px; left:.5em } .koc-menu--bottom-left #koc-menu__active:checked~label .koc-menu__listings .circle { -webkit-transform:rotate(100deg); transform:rotate(100deg) } .koc-menu--bottom-right .circle .placeholder .upside { -webkit-transform:rotate(0deg); transform:rotate(0deg) } .koc-menu--bottom-right .icon { top:30%; left:30% } .koc-menu--bottom-right .koc-menu__toggle { top:160px; left:160px } .koc-menu--bottom-right .koc-menu__listings { top:60px; left:60px } .koc-menu--bottom-right .koc-menu__arrow { -webkit-transform:rotate(45deg); transform:rotate(45deg); transition:all .1 ease; transition-delay:0 } .koc-menu--bottom-right .koc-menu__arrow--top { top:20px; left:220px } .koc-menu--bottom-right #koc-menu__active:checked~label .koc-menu__listings .circle { -webkit-transform:rotate(11deg); transform:rotate(11deg) } .arrow { width:20px; height:20px; border-right:6.666666666666667px solid #fff; border-top:6.666666666666667px solid #fff; border-radius:3px; cursor:pointer; pointer-events:auto } .arrow,.arrow:hover { transition:border-color .3s } .arrow:hover { border-color:#ff947f } #koc-menu__active { position:fixed; top:-99999px; left:-99999px } #koc-menu__active:checked~label .koc-menu__listings { -webkit-transform:rotate(0deg) scale(1); transform:rotate(0deg) scale(1); transition:-webkit-transform 1s; transition:transform 1s; transition:transform 1s,-webkit-transform 1s } #koc-menu__active:checked~label .koc-menu__toggle { background-color:#392338; transition:all 1s } #koc-menu__active:checked~label .hamburger { border-color:transparent; transition:border-color .333333333333333s } #koc-menu__active:checked~label .hamburger:after { top:-2px; border-color:#fff; -webkit-transform:translateX(-50%) rotate(45deg); transform:translateX(-50%) rotate(45deg); transition-property:top,-webkit-transform; transition-property:top,transform; transition-property:top,transform,-webkit-transform; transition-duration:.25s,1s } #koc-menu__active:checked~label .hamburger:before { bottom:-2px; border-color:#fff; -webkit-transform:translateX(-50%) rotate(-45deg); transform:translateX(-50%) rotate(-45deg); transition-property:bottom,-webkit-transform; transition-property:bottom,transform; transition-property:bottom,transform,-webkit-transform; transition-duration:.25s,1s } #koc-menu__active:checked~label .button:hover { color:#c1264e } #koc-menu__active:checked~label .koc-menu__arrow { visibility:visible; transition:all 1s 1.111111111111111s } #koc-menu__active:checked~label .koc-menu__arrow--top label { display:none } #koc-menu__active:checked~label .koc-menu__arrow--top label[for=degree--up-0] { display:block } #koc-menu__active:checked~label #degree--up-0:checked~.koc-menu__listings { -webkit-transform:rotate(106deg); transform:rotate(106deg) } #koc-menu__active:checked~label #degree--up-1:checked~.koc-menu__listings { -webkit-transform:rotate(213deg); transform:rotate(213deg) } #koc-menu__active:checked~label #degree--up-0:checked~.koc-menu__arrow--top label { display:none } #koc-menu__active:checked~label #degre.........完整代码请登录后点击上方下载按钮下载查看
网友评论0