CSS 径向菜单

问题描述

我想做的事:

我想创建一个如下所示的径向菜单，考虑到图片中的所有交互元素，即中心的图像以及它周围的四个区域.解决方案跨浏览器兼容很重要.这只是一个简单的例子，因为零件不一定是四分之一，它们可以是任意数量的零件:

I would like to create a radial menu as shown below, considering all elements in the picture interactive, i.e the image in centre as well as the four quarters around it. It's important that the solution is cross-browser compatible. This is just a simple example as the parts dont really have to be quarters, they can be any possible number of parts :

目前尝试过的解决方案:

我尝试过使用带有边框的 CSS3 圆形 div，边框以这些图像作为背景，但效果不佳，因为每个元素都必须是独立元素.

I have tried using CSS3 round div with border , where the border have these images as background, but doesnt really work well, as each element has to be a stand-alone element.

我听说过 css-shapes，但我不知道如何使用它来创建径向菜单.

I heard about css-shapes, but I don't know how to use it to create the radial menu.

也许还有一种方法可以为这些图像中的每一个添加文本标题...

Maybe there is also a way to add a text caption to each of these images...

感谢您的帮助！

推荐答案

我用 css 径向菜单制作了这支笔.悬停时会出现圆形菜单:

I made this pen with a css radial menu. The circular menu appears on hover :

演示:CSS 径向菜单

Demo : CSS radial menu

径向形状由边框半径和溢出属性组成.悬停动画由 CSS 过渡(缩放和不透明度)处理.

The radial shape is made with border radius and the overflow property. The hover animation is handled with CSS transition (scale and oapcity).

对于带有菜单标题的版本，请参阅此DEMO

For a version with menu titles, see this 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,html{margin:0;padding:0;height:100%;}
body{background:#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);
}

这篇关于CSS 径向菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！