尝试创建具有6个径向线的圆形菜单 [英] Trying to create a circular menu with 6 radials

查看：33
本文介绍了尝试创建具有6个径向线的圆形菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用html和css创建具有6个径向线的圆形菜单.我只得到6个总半径(边界)中的5个.我需要获取介于item5和item6之间的最后一个半径.我需要得到相同的图片:

演示

HTML 

 < div id ="menu">< div class ="item1 item">< div class ="content">< a href =#one">SoluciónAula Digital</a></div></div>< div class ="item2 item">< div class ="content">< a href =#two">实时流媒体</a></div></div>< div class ="item3 item">< div class ="content">< a href =#three"> Social Tecal Online</a></div></div>< div class ="item4项目">< div class ="content">< a href =#four"> FlexScorn</a></div></div>< div class ="item5 item">< div class ="content">< a href =#five">视频点播</a></div></div>< div id ="wrapper6">< div class ="item6 item">< div class ="content">< a href =#six"> VideoColaboración</a></div></div></div>< div id ="center">< a href =#"></a></div></div>

CSS 

  #menu {背景:#aaa;职位:相对宽度:300像素；高度:300像素；保证金:0自动;溢出:隐藏；border-radius:155px;-moz-border-radius:100％；-webkit-border-radius:100％;}#中央 {位置:绝对；左:60px；顶部:60px；宽度:180像素；高度:180像素；z索引:10；背景:#FFFFFF;border-radius:100px;-moz-border-radius:100px;-webkit-border-radius:100px;}#居中{显示:块；宽度:100％;高度:100％}.物品 {背景:#aaa;溢出:隐藏；位置:绝对；转换原点:100％100％;-moz-transform-origin:100％100％;-webkit-transform-origin:100％100％;过渡:背景.5s；-moz-transition:背景.5s；-webkit-transition:背景.5s；-o-transition:背景.5s；-ms-transition:背景.5s；边框:3px实线#FFFFFF;}.item:hover {背景:#eee}.item1 {z索引:1；变换:rotate(60deg);-moz-transform:旋转(60deg)；-webkit-transform:旋转(60deg);宽度:134px；高度:134px；}.item2 {z索引:2；变换:rotate(120deg);-moz-transform:旋转(120deg);-webkit-transform:旋转(120deg);宽度:150像素；高度:150像素；}.item3 {z索引:3；变换:rotate(180deg);-moz-transform:旋转(180deg)；-webkit-transform:旋转(180deg);宽度:150像素；高度:150像素；}.item4 {z索引:4；变换:旋转(240度);-moz-transform:旋转(240deg)；-webkit-transform:旋转(240deg);宽度:152px；高度:152px；}.item5 {z索引:5；变换:rotate(300deg);-moz-transform:旋转(300deg);-webkit-transform:旋转(300deg);宽度:151像素；高度:151像素；}.item6 {边界:无；位置:绝对；z索引:6；变换:rotate(-30deg);-moz-transform:旋转(-30deg)；-webkit-transform:旋转(-30deg);宽度:140像素；高度:140像素；}#wrapper6 {位置:绝对；宽度:160像素；高度:160像素；溢出:隐藏；转换原点:100％100％;-moz-transform-origin:100％100％;-webkit-transform-origin:100％100％;/*边框:2px实线#FFFFFF; */}.item1 .content {左:0px；顶部:17px；变换:rotate(-60deg);-moz-transform:旋转(-60deg)；-webkit-transform:旋转(-60deg);}.item2 .content {左:-5px；顶部:31px；变换:rotate(-59deg);-moz-transform:旋转(-59deg);-webkit-transform:旋转(-59deg);}.item3 .content {左:-40px;顶部:8px；变换:rotate(-237deg);-moz-transform:旋转(-237deg);-webkit-transform:旋转(-237deg);}.item4 .content {左:-43px;顶部:4px；变换:旋转(-240度);-moz-transform:旋转(-240deg);-webkit-transform:旋转(-240deg);}.item5 .content {左:-52px;顶部:7px；变换:rotate(-247deg);-moz-transform:旋转(-247deg);-webkit-transform:旋转(-247deg);}.item6 .content {左:26px；顶部:-3px；变换:rotate(-29deg);-moz-transform:旋转(-29deg);-webkit-transform:旋转(-29deg);}.content，.content a {宽度:100％;高度:100％;文字对齐:居中}.内容 {位置:绝对；}.content a {行高:100px;显示:块；位置:绝对；文字修饰:无；字体家族:"Segoe UI"，Arial，Verdana和sans-serif；font-size:12px;/*文本阴影:1px 1px #eee;文字阴影:0 0 5px #fff，0 0 5px #fff，0 0 5px#fff */}.display-target {显示:无；文本对齐:居中；不透明度:0；}.display-target:target {显示:块；不透明度:1；动画:淡入1秒；-moz动画:淡入1秒；-webkit-animation:淡入1s；-o动画:淡入1秒；-ms动画:淡入1s；}@keyframes淡入{来自{opacity:0}到{opacity:1}}@ -moz-keyframes淡入{来自{opacity:0}到{opacity:1}}@ -webkit-keyframes淡入{来自{opacity:0}到{opacity:1}}@ -o-关键帧淡入{来自{opacity:0}到{opacity:1}}@ -ms-keyframes淡入{来自{opacity:0}到{opacity:1}}

解决方案

我想出了一个简单的问题来使您的换行符生效，尽管有点奇怪.

我要做的就是添加一个没有任何内容的附加项目，然后旋转它，为其提供背景，并将其转换为适当位置.

  transform:旋转(-90deg);-moz-transform:旋转(-90deg);-webkit-transform:旋转(-90deg);宽度:1px；高度:70px；左:68px;顶部:81px；

jsFiddle演示

之所以没有白色边框，是因为您的 item6 已旋转，因此与 item1 对齐，而不是旋转在 item5 和 item6 之间创建了边界.

我尝试旋转 item6 ，因此它在自身和5之间创建了边界，但导致其与item1重叠，这只是造成了永无止境的z-index循环以解决该问题

I'm trying to create a circular menu with 6 radials using html and css. I only get 5 of the 6 total radials (borders). I need get the last radial, between item5 and item6. I need get the same of the picture:

DEMO

HTML

<div id="menu">
    <div class="item1 item">
        <div class="content"><a href="#one">Solución Aula Digital</a></div>
    </div>
    <div class="item2 item">
        <div class="content"><a href="#two">Live Streaming</a></div>
    </div>
    <div class="item3 item">
        <div class="content"><a href="#three">Social Tecal Online</a></div>
    </div>
    <div class="item4 item">
        <div class="content"><a href="#four">FlexScorn</a></div>
    </div>
    <div class="item5 item">
        <div class="content"><a href="#five">Video On Demand</a></div>
    </div>
    <div id="wrapper6">
        <div class="item6 item">
            <div class="content"><a href="#six">Video Colaboración</a></div>
        </div>
    </div>
    <div id="center">
        <a href="#"></a>
    </div>
</div>

CSS

    #menu {
    background: #aaa;
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 155px;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
}
#center {
    position: absolute;
    left: 60px;
    top: 60px;
    width: 180px;
    height: 180px;
    z-index: 10;
    background: #FFFFFF;
    border-radius: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
}
#center a {
    display: block;
    width: 100%;
    height: 100%
}
.item {
    background: #aaa;
    overflow: hidden;
    position: absolute;

    transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
    transition: background .5s;
    -moz-transition: background .5s;
    -webkit-transition: background .5s;
    -o-transition: background .5s;
    -ms-transition: background .5s;
    border: 3px solid #FFFFFF;
}
.item:hover {
    background: #eee
}
.item1 {
    z-index: 1;
    transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    width: 134px;
    height: 134px;
}
.item2 {
    z-index: 2;
    transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    width: 150px;
    height: 150px;
}
.item3 {
    z-index: 3;
    transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
            width: 150px;
    height: 150px;
}
.item4 {
    z-index: 4;
    transform: rotate(240deg);
    -moz-transform: rotate(240deg);
    -webkit-transform: rotate(240deg);
            width: 152px;
    height: 152px;
}
.item5 {
    z-index: 5;
    transform: rotate(300deg);
    -moz-transform: rotate(300deg);
    -webkit-transform: rotate(300deg);
            width: 151px;
    height: 151px;
}
.item6 {
    border: none;
    position: absolute;
    z-index: 6;
    transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    width: 140px;
    height: 140px;
}
#wrapper6 {
    position: absolute;
    width: 160px;
    height: 160px;
    overflow: hidden;
    transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
    /*border: 2px solid #FFFFFF;*/
}



.item1 .content {
    left: 0px;
    top: 17px;
    transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -webkit-transform: rotate(-60deg);
}
.item2 .content {
    left: -5px;
    top: 31px;
    transform: rotate(-59deg);
    -moz-transform: rotate(-59deg);
    -webkit-transform: rotate(-59deg);
}
.item3 .content {
    left: -40px;
    top: 8px;
    transform: rotate(-237deg);
    -moz-transform: rotate(-237deg);
    -webkit-transform: rotate(-237deg);
}
.item4 .content {
    left: -43px;
    top: 4px;
    transform: rotate(-240deg);
    -moz-transform: rotate(-240deg);
    -webkit-transform: rotate(-240deg);
}
.item5 .content {
    left: -52px;
    top: 7px;
    transform: rotate(-247deg);
    -moz-transform: rotate(-247deg);
    -webkit-transform: rotate(-247deg);
}
.item6 .content {
    left: 26px;
    top: -3px;
    transform: rotate(-29deg);
    -moz-transform: rotate(-29deg);
    -webkit-transform: rotate(-29deg);
}
.content, .content a {
    width: 100%;
    height: 100%;
    text-align: center
}
.content {
    position: absolute;
}
.content a {
    line-height: 100px;
    display: block;
    position: absolute;
    text-decoration: none;
    font-family: 'Segoe UI', Arial, Verdana, sans-serif;
    font-size: 12px;
    /*text-shadow: 1px 1px #eee;
    text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff*/
}
.display-target {
    display: none;
    text-align: center;
    opacity: 0;
}
.display-target:target {
    display: block;
    opacity: 1;
    animation: fade-in 1s;
    -moz-animation: fade-in 1s;
    -webkit-animation: fade-in 1s;
    -o-animation: fade-in 1s;
    -ms-animation: fade-in 1s;
}
@keyframes fade-in {
    from { opacity: 0 }
    to { opacity: 1 }
}
@-moz-keyframes fade-in {
    from { opacity: 0 }
    to { opacity: 1 }
}
@-webkit-keyframes fade-in {
    from { opacity: 0 }
    to { opacity: 1 }
}
@-o-keyframes fade-in {
    from { opacity: 0 }
    to { opacity: 1 }
}
@-ms-keyframes fade-in {
    from { opacity: 0 }
    to { opacity: 1 }
}

解决方案

I figured out a simple problem to get your line break in, albeit it is a little odd.

All I did was add an additional item without any content and then rotated it, gave it a background and transformed it into place.

transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
width: 1px;
height: 70px;
left: 68px;
top: 81px;

jsFiddle demo

The reason why you didn't have a white border there is because your item6 was rotated so it lined up with your item1, instead of it being rotated so it created the border between item5 and item6.

I tried rotating item6 so it created the border between itself and 5, but it caused it to overlap with item1, which just caused a never ending z-index loop in order to solve it

这篇关于尝试创建具有6个径向线的圆形菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆