問題描述

我想做的事:

我想創(chuàng)建一個如下所示的徑向菜單，考慮到圖片中的所有交互元素，即中心的圖像以及它周圍的四個區(qū)域.解決方案跨瀏覽器兼容很重要.這只是一個簡單的例子，因為零件不一定是四分之一，它們可以是任意數(shù)量的零件:

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，但我不知道如何使用它來創(chuàng)建徑向菜單.

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

也許還有一種方法可以為這些圖像中的每一個添加文本標(biāo)題...

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

感謝您的幫助！

推薦答案

我用 css 徑向菜單制作了這支筆.懸停時會出現(xiàn)圓形菜單:

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).

對于帶有菜單標(biāo)題的版本，請參閱此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);
}

這篇關(guān)于CSS 徑向菜單的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！