本文旨在指导开发者如何使用CSS实现环绕圆形菜单的数字布局。通过添加额外的wrapper容器，并调整CSS样式中的定位、变换和尺寸属性，可以实现数字围绕圆形菜单的精确环绕效果。本文提供详细的代码示例和步骤，帮助你解决数字定位不准确的问题，并创建一个美观且功能完善的圆形菜单。
在Web开发中，创建具有吸引力的用户界面至关重要。环绕圆形菜单的数字布局是一种常见的交互设计模式，可以用于导航、选项选择等多种场景。本文将详细介绍如何使用CSS来实现这种布局，解决数字位置不准确的问题，并提供优化后的代码示例。
结构调整：添加Wrapper容器
为了更精确地控制数字的位置，我们需要在原有的HTML结构中添加一些wrapper容器。具体来说，我们需要添加一个cn-button-wrapper来包裹中心按钮，以及一个circle-wrapper-outer来包裹数字圆环。
<div class="component csstransforms">
<div class="cn-button-wrapper">
<button class="cn-button" id="cn-button">
<img style="height: auto; width: 117px" src="../../assets/Integro-Bank-Logo-Black-background_prev_ui.c022b598.png" alt="logo" />
</button>
</div>
<div class="cn-wrapper opened-nav" id="cn-wrapper">
<ul>
<li>
<a @click="showMore" href="javascript:void(0)"><span class="learn">Learn</span></a>
</li>
<li>
<a @click="showMore2" href="javascript:void(0)"><span class="learn1">Review</span></a>
</li>
<li>
<a @click="showMore3" href="javascript:void(0)"><span class="learn2">Evaluate</span></a>
</li>
<li>
<a @click="showMore4" href="javascript:void(0)"><span class="learn3">Sign-up</span></a>
</li>
<li>
<a @click="showMore5" href="javascript:void(0)"><span class="learn4">Engage</span></a>
</li>
<li>
<a @click="showMore6" href="javascript:void(0)"><span class="learn5">Share</span></a>
</li>
<li>
<a @click="showMore7" href="javascript:void(0)"><span class="learn6">Impact</span></a>
</li>
<li>
<a @click="showMore8" href="javascript:void(0)"><span class="learn7">Transform</span></a>
</li>
</ul>
</div>
<!-- End of Nav Structure -->
</div>
<div class="circle-wrapper-outer">
<div class="circle-wrapper">
<div class="circle deg-180-new btnDeactivated" id="btn1">1</div>
<div class="circle deg-225-new btnDeactivated" id="btn2">2</div>
<div class="circle deg-270-new btnDeactivated" id="btn3">3</div>
<div class="circle deg-315-new btnDeactivated" id="btn4">4</div>
<div class="circle deg-0-new btnDeactivated" id="btn5">5</div>
<div class="circle deg-45-new btnDeactivated" id="btn6">6</div>
<div class="circle deg-90-new btnDeactivated" id="btn7">7</div>
<div class="circle deg-135-new btnDeactivated" id="btn8">8</div>
</div>
</div>CSS样式调整
接下来，我们需要修改CSS样式来适应新的HTML结构，并精确地定位数字。
立即学习“前端免费学习笔记（深入）”；
-
.component: 添加display: flex和justify-content: center，使内容水平居中。
.component { position: relative; margin-bottom: 3em; height: 15em; display: flex; /* Added */ justify-content: center; /* Added */ } -
.cn-button-wrapper: 设置宽度、高度，并使用Flexbox布局将按钮居中。
.cn-button-wrapper { width: 100%; height: calc(34rem + 250px); display: flex; justify-content: center; align-items: center; margin-left: 15px; } -
.cn-button: 移除绝对定位相关的属性，因为我们将使用Flexbox来定位它。
.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; } -
.circle-wrapper-outer: 设置宽度和绝对定位，用于包裹数字圆环。
.circle-wrapper-outer { width: 100%; position: absolute; top: 0; top: 100px; } -
.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 */ } -
.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; } -
*`.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; } -
.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样式，我们可以实现环绕圆形菜单的数字布局，并解决数字定位不准确的问题。这种布局可以用于多种场景，例如导航、选项选择等。通过本文的指导，你可以轻松地创建美观且功能完善的圆形菜单。
