使用CSS实现环绕圆形菜单的数字布局

本文旨在指导开发者如何使用CSS实现环绕圆形菜单的数字布局。通过添加额外的wrapper容器，并调整CSS样式中的定位、变换和尺寸属性，可以实现数字围绕圆形菜单的精确环绕效果。本文提供详细的代码示例和步骤，帮助你解决数字定位不准确的问题，并创建一个美观且功能完善的圆形菜单。

在Web开发中，创建具有吸引力的用户界面至关重要。环绕圆形菜单的数字布局是一种常见的交互设计模式，可以用于导航、选项选择等多种场景。本文将详细介绍如何使用CSS来实现这种布局，解决数字位置不准确的问题，并提供优化后的代码示例。

结构调整：添加Wrapper容器

为了更精确地控制数字的位置，我们需要在原有的HTML结构中添加一些wrapper容器。具体来说，我们需要添加一个cn-button-wrapper来包裹中心按钮，以及一个circle-wrapper-outer来包裹数字圆环。

  

    
      @@##@@
    
  

  

    

      

        Learn
      
      

        Review
      
      

        Evaluate
      
      

        Sign-up
      
      

        Engage
      
      

        Share
      
      

        Impact
      
      

        Transform
      
    
  

  



  

    
1
    
2
    
3
    
4
    
5
    
6
    
7
    
8
  

CSS样式调整

接下来，我们需要修改CSS样式来适应新的HTML结构，并精确地定位数字。

立即学习“前端免费学习笔记（深入）”；

1. .component: 添加display: flex和justify-content: center，使内容水平居中。

   .component {
     position: relative;
     margin-bottom: 3em;
     height: 15em;
     display: flex; /* Added */
     justify-content: center; /* Added */
   }

2. .cn-button-wrapper: 设置宽度、高度，并使用Flexbox布局将按钮居中。

   .cn-button-wrapper {
     width: 100%;
     height: calc(34rem + 250px);
     display: flex;
     justify-content: center;
     align-items: center;
     margin-left: 15px;
   }

3. .cn-button: 移除绝对定位相关的属性，因为我们将使用Flexbox来定位它。

   

   通用产品企业网站(.NET2.0)1.0

   1、系统采用.net2.0开发，数据库access2、三层架构，数据层、逻辑层和表示层分离3、系统完全使用div＋css布局，可以灵活处理界面4、技术特点: 使用模板页，大大减少代码量 动态生成竖向导航菜单 ul li实现表格 各种自定义用户空间 Reapter等数据控件的灵活运用

   下载

   .cn-button {
     position: absolute;
     /* top: 115%; */ /* Removed */
     /* left: 56%; */ /* Removed */
     z-index: 11;
     /* margin-top: -4.5em; */ /* Removed */
     /* margin-left: -5em; */ /* Removed */
     padding: 0;
     width: 8em;
     height: 8em;
     border: none;
     border-radius: 50%;
     background: none;
     background-color: #004691;
     color: #5f259f;
     text-align: center;
     font-weight: 700;
     font-size: 1em;
     text-transform: uppercase;
     cursor: pointer;
     -webkit-backface-visibility: hidden;
     border: 6px solid #fff;
   }

4. .circle-wrapper-outer: 设置宽度和绝对定位，用于包裹数字圆环。

   .circle-wrapper-outer {
     width: 100%;
     position: absolute;
     top: 0;
     top: 100px;
   }

5. .circle-wrapper: 设置固定的宽度和高度，并使用margin-left: auto和margin-right: auto使圆环水平居中。

   .circle-wrapper {
     width: 34rem; /* Added */
     height: 34rem; /* Added */
     border-radius: 50%;
     position: relative;
     transform: rotate(23deg);
     margin-left: auto;  /* Added */
     margin-right: auto;  /* Added */
     top: 0;  /* Added */
   }

6. .circle: 保持原有的样式，用于数字的显示。

   .circle {
     display: block;
     position: absolute;
     top: 54%;
     left: 54%;
     width: 50px;
     height: 50px;
     margin: -48px -48px -48px -53px;
     background: red;
     border-radius: 51%;
     text-align: center;
     line-height: 50px;
   }

7. *`.deg--new**: 为每个数字添加新的样式，调整translate`的值以精确控制数字的位置。需要根据实际情况调整这些值，以达到最佳的视觉效果。

   .deg-0-new {
     transform: rotate(45deg) translate(325px) rotate(-65deg);
     background: #5ede29;
     color: white;
     font-weight: 600;
   }
   
   .deg-45-new {
     transform: rotate(90deg) translate(325px) rotate(-110deg);
     background: #ffe816;
     color: white;
     font-weight: 600;
   }
   
   .deg-90-new {
     transform: rotate(135deg) translate(325px) rotate(-158deg);
     background: #f74015;
     color: white;
     font-weight: 600;
   }
   
   .deg-135-new {
     transform: rotate(180deg) translate(325px) rotate(-200deg);
     background: #54bef8;
     color: white;
     font-weight: 600;
   }
   
   .deg-180-new {
     transform: rotate(225deg) translate(305px) rotate(-248deg);
     background: #5ede29;
     color: white;
     font-weight: 600;
   }
   
   .deg-225-new {
     transform: rotate(270deg) translate(305px) rotate(-289deg);
     background: #ffe816;
     color: white;
     font-weight: 600;
   }
   
   .deg-270-new {
     transform: rotate(315deg) translate(315px) rotate(-338deg);
     background: #f74015;
     color: white;
     font-weight: 600;
   }
   
   .deg-315-new {
     background: #54bef8;
     transform: rotate(360deg) translate(325px) rotate(-380deg);
     color: white;
     font-weight: 600;
   }

8. .csstransforms .cn-wrapper: 调整top属性，使圆形菜单位于正确的位置。

   .csstransforms .cn-wrapper {
     position: absolute;
     /* top: 100%; */ /* Removed */
     /* left: 50%; */ /* Removed */
     z-index: 10;
     top: 100px; /* Added */
     /* margin-top: -16em; */ /* Removed */
     /* margin-left: -15.5em; */ /* Removed */
     width: 34em;
     height: 34em;
     border-radius: 50%;
     font-weight: bold;
     background: transparent;
     -webkit-transition: all 0.3s ease 0.3s;
     -moz-transition: all 0.3s ease 0.3s;
     transition: all 0.3s ease 0.3s;
     -webkit-transform: scale(0.1);
     -ms-transform: scale(0.1);
     -moz-transform: scale(0.1);
     transform: scale(0.1);
     pointer-events: none;
     overflow: hidden;
   }

注意事项

• 浏览器兼容性: 确保你的CSS代码在不同的浏览器上都能正常工作。可以使用Autoprefixer等工具来自动添加浏览器前缀。
• 响应式设计: 考虑在不同的屏幕尺寸下调整数字和菜单的位置，以确保良好的用户体验。可以使用媒体查询来实现响应式设计。
• 性能优化: 避免过度使用transform属性，因为它可能会影响性能。尽量使用其他CSS属性来实现相同的效果。

总结

通过添加wrapper容器和调整CSS样式，我们可以实现环绕圆形菜单的数字布局，并解决数字定位不准确的问题。这种布局可以用于多种场景，例如导航、选项选择等。通过本文的指导，你可以轻松地创建美观且功能完善的圆形菜单。