CSS 径向菜单
Posted
技术标签:
【中文标题】CSS 径向菜单【英文标题】：CSS radial menu 【发布时间】：2015-05-20 05:15:34 【问题描述】：我想做的事：
我想创建一个如下所示的径向菜单，考虑到图片中的所有交互元素，即中心的图像以及它周围的四个区域。 解决方案跨浏览器兼容很重要。 这只是一个简单的例子，因为零件不一定是四分之一，它们可以是任意数量的零件：
目前尝试过的解决方案：
我尝试过使用带有边框的 CSS3 圆形 div，其中边框以这些图像作为背景，但效果不佳，因为每个元素都必须是独立元素。
我听说过 css-shapes，但我不知道如何使用它来创建径向菜单。
编辑： 也许还有一种方法可以为这些图像中的每一个添加文本标题...
感谢您的帮助！
【问题讨论】：
What have you tried? @linuscl 你要制作剪辑蒙版吗？ @ProllyGeek 不，我正在努力为我的网站制作一个好的起始页......我想我可以实现我的想法。没想到这么难。 @linuscl 请检查我的编辑，如果这是您想要达到的目标，我们可以重新打开问题，或者提交新问题。 我稍微修改了你的文件：codepen.io/anon/pen/RNEbPZ（不需要额外的转换）谢谢！ 【参考方案1】：我用 css 径向菜单制作了这支笔。悬停时会出现圆形菜单：
演示：CSS radial menu
径向形状由边框半径和溢出属性组成。悬停动画由 CSS 过渡（缩放和不透明度）处理。
对于带有菜单标题的版本，请参阅DEMO
径向菜单的完整代码：
html：
<span><span></span></span>
<div class="wrap">
<a href="#"><div></div></a>
<a href="#"><div></div></a>
<a href="#"><div></div></a>
<a href="#"><div></div></a>
<a href="#"><div></div></a>
</div>
CSS：
body,htmlmargin:0;padding:0;height:100%;
bodybackground:#E3DFD2;box-shadow: inset 0 0 20vmin 0 #585247;
.wrap
position:relative;
width:80vmin; height:80vmin;
margin:0 auto;
background:inherit;
transform:scale(0.2) translatez(0px);
opacity:0;
transition:transform .5s, opacity .5s;
a
position:absolute;
left:0; top:0;
width:47.5%; height:47.5%;
overflow:hidden;
transform:scale(.5) translateZ(0px);
background:#585247;
a div
height:100%;
background-size:cover;
opacity:.5;
transition:opacity .5s;
border-radius:inherit;
a:nth-child(1)
border-radius:40vmin 0 0 0;
transform-origin: 110% 110%;
transition:transform .4s .15s;
a:nth-child(1) div
background-image:url('https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg');
a:nth-child(2)
border-radius:0 40vmin 0 0;
left:52.5%;
transform-origin: -10% 110%;
transition:transform .4s .2s;
a:nth-child(2) div
background-image:url('https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg');
a:nth-child(3)
border-radius:0 0 0 40vmin;
top:52.5%;
transform-origin: 110% -10%;
transition:transform .4s .25s;
a:nth-child(3) div
background-image:url('https://farm7.staticflickr.com/6092/6227418584_d5883b0948.jpg');
a:nth-child(4)
border-radius:0 0 40vmin 0;
top:52.5%; left:52.5%;
transform-origin: -10% -10%;
transition:transform .4s .3s;
a:nth-child(4) div
background-image: url('https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg');
a:nth-child(5)
width:55%;height:55%;
left:22.5%; top:22.5%;
border-radius:50vmin;
box-shadow:0 0 0 5vmin #E3DFD2;
transform:scale(1);
a:nth-child(5) div
background-image: url('https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg');
span
position:relative;
display:block;
margin:0 auto;
top:45vmin;
width:10vmin; height:10vmin;
border-radius:100%;
background:#585247;
transform:translateZ(0px);
span span
position:absolute;
width:60%;height:3px;
background:#ACA696;
left:20%; top:50%;
border-radius:0;
span span:after, span span:before
content:'';
position:absolute;
left:0; top:-1.5vmin;
width:100%; height:100%;
background:inherit;
span span:after
top:1.5vmin;
span:hover + .wrap, .wrap:hover
transform:scale(.8) translateZ(0px);
opacity:1;
span:hover + .wrap a, .wrap:hover a
transform:scale(1) translatez(0px);
a:hover div
opacity:1;
transform:translatez(0px);
【讨论】：
它在 Safari 上不起作用：dropbox.com/s/h58pue7wxab1mas/…（我已经说过）。这个问题有解决办法吗？ @linuscl 我对菜单 codepen.io/web-tiki/pen/YPbZBd?editors=110 做了一个小修复，我在 crossbrowsertesting.com 上进行了 safari 测试并修复了这个问题。 @web-tiki 让我们说这是一个很好的解决方案。感谢分享。 @linuscl 我更新了答案并在菜单中插入了文本，请参见此处：codepen.io/web-tiki/pen/YPbZBd（请同时删除不相关的 cmets） @web-tiki我不得不停下来说......该死的太漂亮了！干得好！【参考方案2】：这是一个替代方案，不那么花哨，必须巧妙地使用 img opacity + div background-color 以保持悬停。
/* CSS */
*
box-sizing: border-box;
div
background: white;
img
width: 100%;
-webkit-transition: opacity .2s;
div:hover > img
opacity: .5;
.wrap,
.wrap div:first-child
width: 500px;
height: 500px;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
.wrap div:first-child
float: none;
z-index: 2;
width: 50%;
height: 50%;
border-radius: 100%;
border: 30px solid white;
div div
float: left;
overflow: hidden;
width: 50%;
height: 50%;
border: 15px solid white;
div div:nth-child(2) img
border-radius: 100% 0 0 0;
div div:nth-child(3) img
border-radius: 0 100% 0 0;
div div:nth-child(4) img
border-radius: 0 0 0 100%;
div div:nth-child(5) img
border-radius: 0 0 100% 0;
<!-- HTML -->
<div class="wrap">
<div><img src="http://placehold.it/300x300&text=Center" /></div>
<div><img src="http://placehold.it/300x300&text=Top Left" /></div>
<div><img src="http://placehold.it/300x300&text=Top Right" /></div>
<div><img src="http://placehold.it/300x300&text=Bottom Left" /></div>
<div><img src="http://placehold.it/300x300&text=Bottom Right" /></div>
</div>【讨论】：
【参考方案3】：如果您只需要“四个季度”而不是未知数量，这是一个解决方案：
.wrap
position: relative;
height: 310px;
width: 310px;
.square
display: inline-block;
height: 150px;
width: 150px;
.circle
position: absolute;
height: 180px;
width: 180px;
top: 50%;
left: 50%;
background: gray;
border-radius: 50%;
transform: translate(-50%, -50%);
border: 10px solid white;
.wrap div:hover
background: url(http://placekitten.com/g/300/300);
background-size: 100% 100%;
.square:nth-child(1)
border-radius: 100% 0 0 0;
background: cornflowerblue;
.square:nth-child(2)
border-radius: 0 100% 0 0;
background: tomato;
.square:nth-child(3)
border-radius: 0 0 0 100%;
background: darkorange;
.square:nth-child(4)
border-radius: 0 0 100% 0;
background: green;
<div class="wrap">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="circle"></div>
</div>【讨论】：
背景图像转换也可以吗？ （跨浏览器兼容）我用 CSS 试过了，但它不起作用......【参考方案4】：我对这里的其他示例感到困惑，因此我尝试简化它们并使用可以放入任何内容的容器 div，而不是图像。如果它对任何人有帮助，这就是结果。
/* CSS */
*
padding: 0;
margin: 0;
box-sizing: border-box;
body
background-color: #272727;
.container /* for the container */
width: 90vw;
height: 90vmin;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
display: flex;
flex-wrap: wrap;
/* Basically just a responsive container that stays at the page's center */
.box /* Applies to the four corner boxes within container */
width: 50%;
height: 50%;
border: 2.5vmin solid #272727; /* The 4 borders between the boxes */
.center /* The fifth box at the center, we'll turn it into a circle */
width: 50vmin;
height: 50vmin;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
border-radius: 100%;
border: 5vmin solid #272727; /* The circular border in the center */
z-index: 2;
.inner /* The content holding div inside each of the 5 blocks */
height: 100%; width: 100%; background-color: gold;
.center .inner border-radius: 100%;
.inner:hover
background-color: yellow;
/* In case you want all buttons to have rounded corners, try: */
/*.top-left .inner border-radius: 50vmin 0 0 0;
.top-right .inner border-radius: 0 50vmin 0 0;
.bottom-left .inner border-radius: 0 0 0 50vmin;
.bottom-right .inner border-radius: 0 0 50vmin 0;
*/<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="box top-left"><div class="inner"></div></div>
<div class="box top-right"><div class="inner"></div></div>
<div class="box bottom-left"><div class="inner"></div></div>
<div class="box bottom-right"><div class="inner"></div></div>
<div class="center"><div class="inner"></div></div>
</div>
</body>
</html>【讨论】：
以上是关于CSS 径向菜单的主要内容，如果未能解决你的问题，请参考以下文章