RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 1271635
Accepted
Sevastopol'
Sevastopol'
Asked:2022-04-18 18:57:30 +0000 UTC2022-04-18 18:57:30 +0000 UTC 2022-04-18 18:57:30 +0000 UTC

如何创建一个圆形菜单?

  • 772

我对@UModeL的工作很感兴趣,他使用 CSS 技术绘制了一个圆形菜单。

这是他对如何用圆线(不是角)制作三角形的问题的回答:

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

ul {
  position: relative;
  height: 90vw; max-height: 90vh;
  width: 90vh; max-width: 90vw;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  list-style-type: none;
  box-shadow: 0 0 0 5px violet;
}

li {
  position: absolute;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  height: 50%; width: 50%;
  transform-origin: 100% 100%;
  transform: rotate(0deg) skewy(30deg);
  box-shadow: inset 0 0 15px 0px violet;
  background-image: linear-gradient(to right bottom, black, blue);
  cursor: pointer;
  transition: 0.8s ease-out;
}
li:nth-child(2) { transform: rotate(60deg) skewy(30deg); }
li:nth-child(3) { transform: rotate(120deg) skewy(30deg); }
li:nth-child(4) { transform: rotate(180deg) skewy(30deg); }
li:nth-child(5) { transform: rotate(240deg) skewy(30deg); }
li:nth-child(6) { transform: rotate(300deg) skewy(30deg); }

ul:hover li:not(:hover) {
  box-shadow: inset 0 0 3px 0px violet;
  transition: 0.6s ease-in-out;
}
li:hover {
  box-shadow: inset 0 0 25px 10px violet;
  transition: 0.4s ease-in-out;
}

li a {
  margin: 20% 15%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 33%; width: 33%;
  border-radius: 50%;
  font: bold 100%/1em sans-serif;
  text-decoration: none;
  transform: skewy(-30deg) rotate(0deg);
  color: white;
  box-shadow: inset 0 0 5px 5px violet;
  transition: 0.4s ease-in-out;
}
li:nth-child(2) a { transform: skewy(-30deg) rotate(-60deg); }
li:nth-child(3) a { transform: skewy(-30deg) rotate(-120deg); }
li:nth-child(4) a { transform: skewy(-30deg) rotate(-180deg); }
li:nth-child(5) a { transform: skewy(-30deg) rotate(-240deg); }
li:nth-child(6) a { transform: skewy(-30deg) rotate(-300deg); }

li:hover a {
  color: violet; box-shadow: inset 0 0 5px 5px white;
}
<ul>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
</ul>

作者:@UModel

问题:是否有可能使用任何其他方法和技术来绘制和创建问题标签中指出的类似动画效果?

javascript
  • 2 2 个回答
  • 10 Views

2 个回答

  • Voted
  1. Sevastopol'
    2022-04-18T18:57:30Z2022-04-18T18:57:30Z

    SVG 选项:

    body {display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0;}
    .g1, .g2, .g3 {fill: goldenrod;}
    .o1, .o2, .o3 {fill: orangered;}
    svg a:hover .g1, svg a:hover .g2, svg a:hover .g3 {fill: gold;}
    svg a:hover .o1, svg a:hover .o2, svg a:hover .o3 {fill: red;}
    svg a:hover text {fill: white;}
    svg path, svg text {transition: 0.4s ease-in-out;}
    <svg x="0" y="0" viewBox="0 0 500 500" width="500px" height="500px">
    
    <!-- 1 ряд -->
    
    <g><a href="#">
    <path class="g1" d="M250,129.5c-33.2,0-63.2,13.5-84.9,35.3l84.9,84.9V129.5z"/>
    <text transform="translate(220, 185) rotate(-25)">1</text>      
    </a></g>
    
    <g><a href="#">
    <path class="o1" d="M250,129.5v120.2l84.9-84.9C313.2,142.9,283.2,129.5,250,129.5z"/>
    <text transform="translate(275, 180) rotate(25)">2</text>       
    </a></g>
    
    <g><a href="#">
    <path class="g1" d="M370.1,249.7c0-33.2-13.4-63.2-35.1-84.9L250,249.7H370.1z"/>
    <text transform="translate(310, 220) rotate(70)">3</text>       
    </a></g>
    
    <g><a href="#">
    <path class="o1" d="M334.9,334.6c21.7-21.7,35.1-51.8,35.1-84.9H250L334.9,334.6z"/>
    <text transform="translate(310, 270) rotate(120)">4</text>      
    </a></g>
    
    <g><a href="#">
    <path class="g1" d="M250,369.9c33.2,0,63.2-13.5,84.9-35.3L250,249.7V369.9z"/>
    <text transform="translate(275, 310) rotate(155)">5</text>      
    </a></g>
    
    <g><a href="#">
    <path class="o1" d="M165.1,334.6c21.7,21.8,51.8,35.3,84.9,35.3V249.7L165.1,334.6z"/>
    <text transform="translate(230, 315) rotate(-155)">6</text>     
    </a></g>
    
    <g><a href="#">
    <path class="g1" d="M129.9,249.7c0,33.2,13.4,63.2,35.1,84.9l84.9-84.9H129.9z"/>
    <text transform="translate(185, 280) rotate(-120)">7</text>     
    </a></g>
    
    <g><a href="#">
    <path class="o1" d="M165.1,164.7c-21.7,21.7-35.1,51.8-35.1,84.9H250L165.1,164.7z"/>
    <text transform="translate(175, 225) rotate(-70)">8</text>      
    </a></g>
    
    <!-- 2 ряд -->
    
    <g><a href="#">
    <path class="o2" d="M250,129.5V58.6c-52.7,0-100.5,21.4-135,56l50.1,50.1C186.8,142.9,216.8,129.5,250,129.5z"/>
    <text transform="translate(180, 120) rotate(-25)">2 - 1</text>      
    </a></g>
    
    <g><a href="#">
    <path class="g2" d="M334.9,164.7l50.1-50.1c-34.5-34.6-82.3-56-135-56v70.8C283.2,129.5,313.2,142.9,334.9,164.7z"/>
    <text transform="translate(295, 105) rotate(25)">2 - 2</text>       
    </a></g>
    
    <g><a href="#">
    <path class="o2" d="M334.9,164.7c21.7,21.7,35.1,51.8,35.1,84.9h70.7c0-52.7-21.3-100.4-55.8-135L334.9,164.7z"/>
    <text transform="translate(380, 175) rotate(70)">2 - 3</text>       
    </a></g>
    
    <g><a href="#">
    <path class="g2" d="M334.9,334.6l50.1,50.1c34.5-34.6,55.8-82.3,55.8-135h-70.7C370.1,282.8,356.6,312.9,334.9,334.6z"/>
    <text transform="translate(395, 295) rotate(120)">2 - 4</text>      
    </a></g>
    
    <g><a href="#">
    <path class="o2" d="M250,369.9v70.8c52.7,0,100.5-21.4,135-56l-50.1-50.1C313.2,356.4,283.2,369.9,250,369.9z"/>
    <text transform="translate(320, 380) rotate(155)">2 - 5</text>      
    </a></g>
    
    <g><a href="#">
    <path class="g2" d="M165.1,334.6L115,384.7c34.5,34.6,82.3,56,135,56v-70.8C216.8,369.9,186.8,356.4,165.1,334.6z"/>
    <text transform="translate(205, 390) rotate(-155)">2 - 6</text>     
    </a></g>
    
    <g><a href="#">
    <path class="o2" d="M129.9,249.7H59.2c0,52.7,21.3,100.4,55.8,135l50.1-50.1C143.4,312.9,129.9,282.8,129.9,249.7z"/>
    <text transform="translate(120, 320) rotate(-120)">2 - 7</text>     
    </a></g>
    
    <g><a href="#">
    <path class="g2" d="M165.1,164.7L115,114.7c-34.5,34.6-55.8,82.3-55.8,135h70.7C129.9,216.5,143.4,186.5,165.1,164.7z"/>
    <text transform="translate(110, 210) rotate(-70)">2 - 8</text>      
    </a></g>
    
    <!-- 3 ряд -->
    
    <g><a href="#">
    <path class="g3" d="M250,58.6V6C182.7,6,121.8,33.3,77.8,77.4l37.2,37.2C149.5,80,197.3,58.6,250,58.6z"/>
    <text transform="translate(150, 60) rotate(-25)">3 - 1</text>       
    </a></g>
    
    <g><a href="#">
    <path class="o3" d="M385,114.7l37.2-37.2C378.2,33.3,317.3,6,250,6v52.7C302.7,58.6,350.5,80,385,114.7z"/>
    <text transform="translate(320, 50) rotate(25)">3 - 2</text>
    </a></g>
    
    <g><a href="#">
    <path class="g3" d="M440.8,249.7h52.6c0-67.2-27.2-128.1-71.2-172.2L385,114.7C419.5,149.2,440.8,197,440.8,249.7z"/>
    <text transform="translate(440, 150) rotate(70)">3 - 3</text>       
    </a></g>
    
    <g><a href="#">
    <path class="o3" d="M440.8,249.7c0,52.7-21.3,100.4-55.8,135l37.2,37.2c44-44.1,71.2-105,71.2-172.2H440.8z"/>
    <text transform="translate(450, 320) rotate(120)">3 - 4</text>      
    </a></g>
    
    <g><a href="#">
    <path class="g3" d="M250,440.7v52.7c67.3,0,128.2-27.3,172.2-71.5L385,384.7C350.5,419.3,302.7,440.7,250,440.7z"/>
    <text transform="translate(345, 440) rotate(155)">3 - 5</text>      
    </a></g>
    
    <g><a href="#">
    <path class="o3" class="o1" d="M115,384.7l-37.2,37.2c44.1,44.2,105,71.5,172.2,71.5v-52.7C197.3,440.7,149.5,419.3,115,384.7z"/>
    <text transform="translate(180, 450) rotate(-155)">3 - 6</text>     
    </a></g>
    
    <g><a href="#">
    <path class="g3" d="M59.2,249.7H6.6c0,67.2,27.2,128.1,71.2,172.2l37.2-37.2C80.5,350.1,59.2,302.4,59.2,249.7z"/>
    <text transform="translate(60, 350) rotate(-120)">3 - 7</text>      
    </a></g>
    
    <g><a href="#">
    <path class="o3" d="M115,114.7L77.8,77.4c-44,44.1-71.2,105-71.2,172.2h52.6C59.2,197,80.5,149.2,115,114.7z"/>
    <text transform="translate(45, 185) rotate(-70)">3 - 8</text>       
    </a></g>
    
    </svg>

    • 4
  2. Best Answer
    Alexandr_TT
    2022-04-19T01:44:40Z2022-04-19T01:44:40Z

    决定通过指向我们网站的链接使圆形菜单有点功能 - stackoverflow

    • 弹窗提示:

    <title> Все вопросы [javascript] </title>

    • 圆圈分为扇区,每个扇区都有自己的path,因此可以将单独的链接链接到其扇区和相应的提示。

    • 悬停光标时,扇区会突出显示

    • 阴影是使用 SVG 过滤器实现的

    • 所有链接都在网站内工作,点击获取乐趣

    • 使用 CSS 变量设置颜色,以便更轻松地将颜色主题更改为您喜欢的颜色

    要更深入地了解应用程序的操作,您可以阅读代码注释。

    svg {
      height: 330px;
      width: 330px;
      --d:gold;
      --r:greenYellow;
      --g:yellowgreen;
    }
    
    #spot {
      fill:white;
      pointer-events:none;
      }
     #arrow {
     fill:none;
     stroke:white;
     stroke-width:2;
     pointer-events:none;
     } 
    
    #center {
    fill:#FF4500;
    stroke:white;
    stroke-width:3;
    cursor: pointer; 
    -webkit-transition: all 0.8s ease;
      transition: all 0.8s ease;
    
    } 
    #center:hover {
    fill: var(--g);
    filter:url(#drop-shadow);
    }
    
    #s1,#s3, #s5, #s7 {
    fill:#797979;
    cursor: pointer; 
     -webkit-transition: all 0.8s ease;
      transition: all 0.8s ease;
    }
    
    #s2,#s4,#s6,#s8 {
    fill:#FF4500;    
    cursor: pointer; 
    -webkit-transition: all 0.8s ease;
      transition: all 0.8s ease;
    }
    
    
    #s1:hover, #s3:hover, #s5:hover, #s7:hover  {
     fill: var(--d);
     filter:url(#drop-shadow);
    }
    #s2:hover, #s4:hover, #s6:hover, #s8:hover  {
     fill: var(--r);
     filter:url(#drop-shadow);
    }
    <svg xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink" viewBox='0 0 110 110'> 
        <defs>  
         <!-- Фильтр тени при наведении -->
    <filter id="drop-shadow" x="-20%" y="-20%" height="130%" width="130%">
          <feGaussianBlur in="SourceAlpha" stdDeviation="2"/> 
          <feOffset dx="1" dy="0" result="offsetblur"/> 
          <feMerge> 
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/> 
          </feMerge>
        </filter>
    </defs> 
      <!-- Сегменты круга с рабочими ссылками -->
    <g transform="rotate(-22.5 55 55)" >
    <a xlink:href="https://ru.stackoverflow.com/questions"> 
        <title> Все вопросы </title>
      <path id="s1"  d="M 55 55 L 105 55 A 50 50 0 0 1 90.35 90.35 Z"/>
    </a>
        <a xlink:href="https://ru.stackoverflow.com/questions/tagged/javascript"> 
            <title> Все вопросы [javascript]  </title>
          <path id="s2"  d="M 55 55 L 90.35 90.35 A 50 50 0 0 1 55 105 Z"/>
         </a> 
        
    <a xlink:href="https://ru.stackoverflow.com/questions/tagged/svg">
        <title> Все вопросы [SVG]  </title>
    <path id="s3"  d="M 55 55 L 55 105 A 50 50 0 0 1 19.6447 90.35 Z" />
    </a>
        <a xlink:href="https://ru.stackoverflow.com/questions/tagged/css"> 
           <title> Все вопросы [CSS]  </title>
        <path id="s4"  d="M 55 55 L 19.64 90.353 A 50 50 0 0 1 5 55 Z" />
        </a>
    <a xlink:href="https://ru.stackoverflow.com/questions/tagged/java"> 
         <title> Все вопросы [java] </title>
    <path id="s5"  d="M 55 55 L 5 55 A 50 50 0 0 1 19.64 19.64 Z" />
    </a> 
        <a xlink:href="https://ru.stackoverflow.com/questions/tagged/python">
           <title> Все вопросы python  </title>
        <path id="s6"  d="M 55 55 L 19.64 19.64 A 50 50 0 0 1 55 5 Z" />
        </a> 
    <a xlink:href="https://ru.stackoverflow.com/help"> 
         <title> Справочный центр </title> 
    <path id="s7"  d="M 55 55 L 55 5 A 50 50 0 0 1 90.35 19.64 Z" />
    </a>
        <a xlink:href="https://ru.stackoverflow.com/questions/tagged/php"> 
            <title> Все вопросы [php]   </title>
        <path id="s8"  d="M 55 55 L 90.35 19.64 A 50 50 0 0 1 105 55 Z" />
        
        </a>
    </g>  
          <a xlink:href="https://ru.stackoverflow.com/questions/tagged/html"> 
            <title> Все вопросы [HTML]  </title> 
         
      <circle id="center" cx='55' cy='55' r='17'  />  
        <text x="45" y="57" fill="white" font-size="8px" pointer-events="none">HTML</text>
      </a>
         <text  x="69" y="30" fill="white" font-size="10px" pointer-events="none">[Php]</text> 
           <text  x="45" y="20" fill="white" font-size="10px" pointer-events="none">Help</text>  
             <text transform="translate(-45 10) rotate(55 55 55)" x="25" y="20" fill="white" font-size="10px" pointer-events="none">python</text> 
                <text  x="75" y="85" fill="white" font-size="14px" pointer-events="none">JS</text>      
             <text  x="43" y="95" fill="white" font-size="12px" pointer-events="none">SVG</text>    
           <text  x="18" y="85" fill="white" font-size="12px" pointer-events="none">CSS</text>   
          <text  x="12" y="60" fill="white" font-size="12px" pointer-events="none">java</text>    
         <text  x="80" y="60" fill="white" font-size="12px" pointer-events="none">All</text>          
                

    • 3

相关问题

  • 第二个 Instagram 按钮的 CSS 属性

  • 由于模糊,内容不可见

  • 弹出队列。消息显示不正确

  • 是否可以在 for 循环中插入提示?

  • 如何将 JSON 请求中的信息输出到数据表 Vuetify vue.js?

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    表格填充不起作用

    • 2 个回答
  • Marko Smith

    提示 50/50,有两个,其中一个是正确的

    • 1 个回答
  • Marko Smith

    在 PyQt5 中停止进程

    • 1 个回答
  • Marko Smith

    我的脚本不工作

    • 1 个回答
  • Marko Smith

    在文本文件中写入和读取列表

    • 2 个回答
  • Marko Smith

    如何像屏幕截图中那样并排排列这些块?

    • 1 个回答
  • Marko Smith

    确定文本文件中每一行的字符数

    • 2 个回答
  • Marko Smith

    将接口对象传递给 JAVA 构造函数

    • 1 个回答
  • Marko Smith

    正确更新数据库中的数据

    • 1 个回答
  • Marko Smith

    Python解析不是css

    • 1 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5