CSS 圆形菜单 – 有爱前端

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS Circular menu</title> <style type="text/css"> * { Box-sizing: Border-box; } /* Created on : 22-Jun-2015, 13:00:20 Author : probinson Based on : http://codepen.io/schoenwaldnils/pen/JnIKA */ /* following functions from https://unindented.org/articles/trigonometry-in-sass/ */ .circular-menu-container { margin-top: 20px; margin-bottom: 20px; max-width: none; width: auto; } .circular-menu { width: 600px; height: 600px; position: relative; left: 50%; margin: 0; margin-left: -300px; overflow: hidden; border-radius: 500px; border-radius: 50%; z-index: 1; list-style: none; box-shadow: 0px 0px 15px #333; } .center-section { width: 360px; height: 360px; position: absolute; top: 50%; left: 50%; margin-top: -180px; margin-left: -180px; padding: 55px; border-radius: 500px; border-radius: 50%; text-align: center; background: #fff; box-shadow: inset 0px 0px 15px #333; display: none; z-index: 1; } .center-section.section-intro { display: block; } .circular-menu li:hover ~ .center-section.section-intro, .touch .circular-menu li:focus ~ .center-section.section-intro { display: none; } .touch .circular-menu li:focus { outline: 0; } .circular-menu li div.label { position: absolute; width: 180px; height: 180px; z-index: 2; } .circular-menu li div.label p { text-align: center; max-width: 118.8px; margin: 0 auto; margin-top: 72px; color: #fff; } .circular-menu li span.arrow { position: absolute; width: 30px; height: 30px; display: block; transition: all 300ms ease-out; z-index: 2; } .circular-menu li .bg { width: 350px; height: 300px; position: absolute; transform-origin: 0 300px; margin-top: -300px; left: 50%; top: 50%; transition: all 300ms ease-out; } .circular-menu li { position: absolute; text-decoration: none; top: 50%; left: 50%; display: none; } .circular-menu li:nth-child(1) { display: block; } .circular-menu li:nth-child(1) .bg { transform: rotate(-70deg) skew(-50deg); background: #11703C; } .circular-menu li:nth-child(1):hover .bg, .touch .circular-menu li:nth-child(1):focus .bg { background: #189c54; } .circular-menu li:nth-child(1) span.arrow { transform: rotate(-45deg); margin: -225.0px 0 0 -15.0px; background: #11703C; } .circular-menu li:nth-child(1):hover span.arrow, .touch .circular-menu li:nth-child(1):focus span.arrow { background: #189c54; margin: -195.0px 0 0 -15.0px; } .circular-menu li:nth-child(1) div.label { margin: -330.0px 0 0 -90.0px; } .circular-menu li:nth-child(1):hover div.center-section.section-1, .touch .circular-menu li:nth-child(1):focus div.center-section.section-1 { display: block; } .circular-menu li:nth-child(2) { display: block; } .circular-menu li:nth-child(2) .bg { transform: rotate(-30deg) skew(-50deg); background: #8A8D53; } .circular-menu li:nth-child(2):hover .bg, .touch .circular-menu li:nth-child(2):focus .bg { background: #a5a86b; } .circular-menu li:nth-child(2) span.arrow { transform: rotate(-5deg); margin: -175.86933px 0 0 119.9854px; background: #8A8D53; } .circular-menu li:nth-child(2):hover span.arrow, .touch .circular-menu li:nth-child(2):focus span.arrow { background: #a5a86b; margin: -152.888px 0 0 100.70177px; } .circular-menu li:nth-child(2) div.label { margin: -273.85067px 0 0 64.26903px; } .circular-menu li:nth-child(2):hover div.center-section.section-2, .touch .circular-menu li:nth-child(2):focus div.center-section.section-2 { display: block; } .circular-menu li:nth-child(3) { display: block; } .circular-menu li:nth-child(3) .bg { transform: rotate(10deg) skew(-50deg); background: #B6238E; } .circular-menu li:nth-child(3):hover .bg, .touch .circular-menu li:nth-child(3):focus .bg { background: #d834ab; } .circular-menu li:nth-child(3) span.arrow { transform: rotate(35deg); margin: -51.46612px 0 0 191.80963px; background: #B6238E; } .circular-menu li:nth-child(3):hover span.arrow, .touch .circular-menu li:nth-child(3):focus span.arrow { background: #d834ab; margin: -46.25667px 0 0 162.2654px; } .circular-menu li:nth-child(3) div.label { margin: -131.67556px 0 0 146.35386px; } .circular-menu li:nth-child(3):hover div.center-section.section-3, .touch .circular-menu li:nth-child(3):focus div.center-section.section-3 { display: block; } .circular-menu li:nth-child(4) { display: block; } .circular-menu li:nth-child(4) .bg { transform: rotate(50deg) skew(-50deg); background: #5FC3BA; } .circular-menu li:nth-child(4):hover .bg, .touch .circular-menu li:nth-child(4):focus .bg { background: #84d1ca; } .circular-menu li:nth-child(4) span.arrow { transform: rotate(75deg); margin: 90px 0 0 166.86533px; background: #5FC3BA; } .circular-menu li:nth-child(4):hover span.arrow, .touch .circular-menu li:nth-child(4):focus span.arrow { background: #84d1ca; margin: 75px 0 0 140.88457px; } .circular-menu li:nth-child(4) div.label { margin: 30px 0 0 117.8461px; } .circular-menu li:nth-child(4):hover div.center-section.section-4, .touch .circular-menu li:nth-child(4):focus div.center-section.section-4 { display: block; } .circular-menu li:nth-child(5) { display: block; } .circular-menu li:nth-child(5) .bg { transform: rotate(90deg) skew(-50deg); background: #9303ED; } .circular-menu li:nth-child(5):hover .bg, .touch .circular-menu li:nth-child(5):focus .bg { background: #aa27fc; } .circular-menu li:nth-child(5) span.arrow { transform: rotate(115deg); margin: 182.33545px 0 0 56.82423px; background: #9303ED; } .circular-menu li:nth-child(5):hover span.arrow, .touch .circular-menu li:nth-child(5):focus span.arrow { background: #aa27fc; margin: 154.14467px 0 0 46.56363px; } .circular-menu li:nth-child(5) div.label { margin: 135.52623px 0 0 -7.91517px; } .circular-menu li:nth-child(5):hover div.center-section.section-5, .touch .circular-menu li:nth-child(5):focus div.center-section.section-5 { display: block; } .circular-menu li:nth-child(6) { display: block; } .circular-menu li:nth-child(6) .bg { transform: rotate(130deg) skew(-50deg); background: #1FF8F2; } .circular-menu li:nth-child(6):hover .bg, .touch .circular-menu li:nth-child(6):focus .bg { background: #50faf5; } .circular-menu li:nth-child(6) span.arrow { transform: rotate(155deg); margin: 182.33545px 0 0 -86.82423px; background: #1FF8F2; } .circular-menu li:nth-child(6):hover span.arrow, .touch .circular-menu li:nth-child(6):focus span.arrow { background: #50faf5; margin: 154.14467px 0 0 -76.56363px; } .circular-menu li:nth-child(6) div.label { margin: 135.52623px 0 0 -172.08483px; } .circular-menu li:nth-child(6):hover div.center-section.section-6, .touch .circular-menu li:nth-child(6):focus div.center-section.section-6 { display: block; } .circular-menu li:nth-child(7) { display: block; } .circular-menu li:nth-child(7) .bg { transform: rotate(170deg) skew(-50deg); background: #58CE62; } .circular-menu li:nth-child(7):hover .bg, .touch .circular-menu li:nth-child(7):focus .bg { background: #7fda87; } .circular-menu li:nth-child(7) span.arrow { transform: rotate(195deg); margin: 90px 0 0 -196.86533px; background: #58CE62; } .circular-menu li:nth-child(7):hover span.arrow, .touch .circular-menu li:nth-child(7):focus span.arrow { background: #7fda87; margin: 75px 0 0 -170.88457px; } .circular-menu li:nth-child(7) div.label { margin: 30px 0 0 -297.8461px; } .circular-menu li:nth-child(7):hover div.center-section.section-7, .touch .circular-menu li:nth-child(7):focus div.center-section.section-7 { display: block; } .circular-menu li:nth-child(8) { display: block; } .circular-menu li:nth-child(8) .bg { transform: rotate(210deg) skew(-50deg); background: #119451; } .circular-menu li:nth-child(8):hover .bg, .touch .circular-menu li:nth-child(8):focus .bg { background: #16c26a; } .circular-menu li:nth-child(8) span.arrow { transform: rotate(235deg); margin: -51.46612px 0 0 -221.80963px; background: #119451; } .circular-menu li:nth-child(8):hover span.arrow, .touch .circular-menu li:nth-child(8):focus span.arrow { background: #16c26a; margin: -46.25667px 0 0 -192.2654px; } .circular-menu li:nth-child(8) div.label { margin: -131.67556px 0 0 -326.35386px; } .circular-menu li:nth-child(8):hover div.center-section.section-8, .touch .circular-menu li:nth-child(8):focus div.center-section.section-8 { display: block; } .circular-menu li:nth-child(9) { display: block; } .circular-menu li:nth-child(9) .bg { transform: rotate(250deg) skew(-50deg); background: #2B0EEC; } .circular-menu li:nth-child(9):hover .bg, .touch .circular-menu li:nth-child(9):focus .bg { background: #523af3; } .circular-menu li:nth-child(9) span.arrow { transform: rotate(275deg); margin: -175.86933px 0 0 -149.98539px; background: #2B0EEC; } .circular-menu li:nth-child(9):hover span.arrow, .touch .circular-menu li:nth-child(9):focus span.arrow { background: #523af3; margin: -152.888px 0 0 -130.70177px; } .circular-menu li:nth-child(9) div.label { margin: -273.85067px 0 0 -244.26902px; } .circular-menu li:nth-child(9):hover div.center-section.section-9, .touch .circular-menu li:nth-child(9):focus div.center-section.section-9 { display: block; } .animated { animation-duration: 0.75s; animation-fill-mode: both; } @keyframes fadeInUp { 0% { opacity: 0; transform: translate3d(0, 50%, 0); } 100% { opacity: 1; transform: none; } } .fadeInUp { animation-name: fadeInUp; } </style> </head> <body> <div class="circular-menu-container"> <ul class="circular-menu"> <li class="" tabindex="1"> <div class="center-section section-1"> <div class="animated fadeInUp"> <h2>Title</h2> <a href="#">Link to content</a> </div> </div> <span class="arrow"></span> <div class="bg"></div> <div class="label"> <p>Menu item</p> </div> </li> <li class="" tabindex="2"> <div class="center-section section-2"> <div class="animated fadeInUp"> <h2>Title</h2> <a href="#">Link to content</a> </div> </div> <span class="arrow"></span> <div class="bg"></div> <div class="label"> <p>Menu item</p> </div> </li> <li class="" tabindex="3"> <div class="center-section section-3"> <div class="animated fadeInUp"> <h2>Title</h2> <a href="#">Link to content</a> </div> </div> <span class="arrow"></span> <div class="bg"></div> <div class="label"> <p>Menu item</p> </div> </li> <li class="" tabindex="4"> <div class="center-section section-4"> <div class="animated fadeInUp"> <h2>Title</h2> <a href="#">Link to content</a> </div> </div> <span class="arrow"></span> <div class="bg"></div> <div class="label"> <p>Menu item</p> </div> </li> <li class="" tabindex="5"> <div class="center-section section-5"> <div class="animated fadeInUp"> <h2>Title</h2> <a href="#">Link to content</a> </div> </div> <span class="arrow"></span> <div class="bg"></div> <div class="label"> <p>Menu item</p> </div> </li> <li class="" tabindex="6"> <div class="center-section section-6"> <div class="animated fadeInUp"> <h2>Title</h2> <a href="#">Link to content</a> </div> </div> <span class="arrow"></span> <div class="bg"></div> <div class="label"> <p>Menu item</p> </div> </li> <li class="" tabindex="7"> <div class="center-section section-7"> <div class="animated fadeInUp"> <h2>Title</h2> <a href="#">Link to content</a> </div> </div> <span class="arrow"></span> <div class="bg"></div> <div class="label"> <p>Menu item</p> </div> </li> <li class="" tabindex="8"> <div class="center-section section-8"> <div class="animated fadeInUp"> <h2>Title</h2> <a href="#">Link to content</a> </div> </div> <span class="arrow"></span> <div class="bg"></div> <div class="label"> <p>Menu item</p> </div> </li> <li class="" tabindex="9"> <div class="center-section section-9"> <div class="animated fadeInUp"> <h2>Title</h2> <a href="#">Link to content</a> </div> </div> <span class="arrow"></span> <div class="bg"></div> <div class="label"> <p>Menu item</p> </div> </li> <div class="center-section section-intro"> <div class="animated fadeInUp"> <h2>Choose a section</h2> <p>some more content</p> </div> </div> </ul> </div> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » CSS 圆形菜单