CSS实现圆形菜单外围数字环绕布局教程-html教程-PHP中文网

CSS实现圆形菜单外围数字环绕布局教程

本教程旨在解决css圆形菜单中数字元素定位不准确的问题。通过引入额外的html包装器和精细调整css `transform`属性，特别是`translate`值，我们将演示如何精确控制数字在圆形菜单外围的径向位置，同时保持其文本方向正确。本文将提供完整的代码示例和详细解释，帮助您构建结构清晰、布局合理的圆形菜单。

CSS圆形菜单与数字环绕布局

在网页设计中，圆形菜单以其独特的交互性和视觉吸引力越来越受欢迎。然而，在圆形菜单外围精确放置辅助性数字或图标，使其与菜单项对齐且保持良好可读性，常常是一个挑战。本教程将深入探讨如何使用CSS transform属性，结合合理的HTML结构调整，来实现一个八个数字环绕八个菜单项的圆形布局。

理解布局挑战

原始布局的问题在于，菜单项本身通过 rotate 和 skew 组合定位，而数字元素则独立于菜单项，通过另一组 rotate 和 translate 属性进行定位。当这两个独立的定位系统没有精确协调时，就会导致数字位置偏移。核心挑战在于：

径向距离控制：如何精确控制数字元素距离中心点的距离。
角度对齐：如何确保每个数字与对应的菜单项在角度上对齐。
文本方向：如何避免数字文本因旋转而倾斜，保持水平可读。

HTML结构优化

为了更好地管理布局，我们首先对HTML结构进行优化，引入额外的包装器（wrapper）来分离和控制不同元素的定位上下文。

原始HTML结构（部分）:

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

<div class="component csstransforms">
  <button class="cn-button" id="cn-button">...</button>
  <div class="cn-wrapper opened-nav" id="cn-wrapper">
    <ul>
      <li><a><span>Learn</span></a></li>
      <!-- ...其他菜单项... -->
    </ul>
  </div>
</div>
<div class="circle-wrapper">
  <div class="circle deg-180 btnDeactivated" id="btn1">1</div>
  <!-- ...其他数字元素... -->
</div>

登录后复制

优化后的HTML结构:

DeepBrain

AI视频生成工具，ChatGPT +生成式视频AI =你可以制作伟大的视频!

查看详情

<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>
</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>

登录后复制

结构调整说明:

cn-button-wrapper: 用于将中心按钮与主菜单容器 cn-wrapper 隔离开来，并提供一个独立的居中上下文。
circle-wrapper-outer: 作为一个绝对定位的容器，用于整体定位数字环，使其能够独立于主菜单进行布局。
circle-wrapper: 调整其尺寸为正方形，并设置 border-radius: 50%，确保它是一个完美的圆形，作为数字元素的定位参考。通过 margin-left: auto; margin-right: auto; 实现水平居中。
.circle 元素的类名更新: 将原有的 deg-X 类替换为 deg-X-new，以便应用新的定位逻辑。

CSS样式详解

核心的布局调整集中在CSS样式上。我们将逐步分析关键的CSS规则。

1. 整体容器与居中

.component {
  position: relative;
  margin-bottom: 3em;
  height: 15em;
  display: flex; /* 新增：使用Flexbox居中内容 */
  justify-content: center; /* 新增：水平居中 */
}

.cn-button-wrapper { /* 新增包装器样式 */
  width: 100%;
  height: calc(34rem + 250px); /* 根据菜单和数字环大小调整 */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 15px; /* 微调 */
}

.cn-button {
  position: absolute; /* 保持绝对定位 */
  /* 移除原有的 top, left, margin-top, margin-left，让其由父级cn-button-wrapper居中 */
  z-index: 11;
  width: 8em;
  height: 8em;
  border-radius: 50%;
  /* ...其他样式保持不变... */
}

.csstransforms .cn-wrapper {
  position: absolute; /* 保持绝对定位 */
  top: 100px; /* 调整为固定值，使其位于按钮下方 */
  /* 移除原有的 top, left, margin-top, margin-left */
  z-index: 10;
  width: 34em;
  height: 34em;
  border-radius: 50%;
  /* ...其他样式保持不变... */
}

登录后复制

.component 使用 display: flex 和 justify-content: center 来居中其内部内容。
.cn-button-wrapper 同样使用 Flexbox 居中其内部的 cn-button，并设置了合适的尺寸。
.cn-button 和 .cn-wrapper 不再需要 top, left, margin 等属性来手动定位，而是依赖其父容器的 Flexbox 布局或直接设置 top 值。cn-wrapper 的 top: 100px 将其定位在 component 容器内的一个固定位置。

2. 数字环容器定位

.circle-wrapper-outer { /* 新增外层包装器样式 */
  width: 100%;
  position: absolute; /* 绝对定位，覆盖在其他内容之上 */
  top: 100px; /* 与 cn-wrapper 的 top 值保持一致，确保同中心 */
}

.circle-wrapper {
  width: 34rem; /* 调整为与 cn-wrapper 相似的尺寸，确保圆形 */
  height: 34rem; /* 调整为与 cn-wrapper 相似的尺寸 */
  border-radius: 50%; /* 确保为圆形 */
  position: relative;
  transform: rotate(23deg); /* 整体旋转数字环 */
  margin-left: auto;  /* 居中 */
  margin-right: auto;  /* 居中 */
  top: 0;  /* 调整 */
}

登录后复制

circle-wrapper-outer 采用 position: absolute 并设置 top: 100px，使其与 cn-wrapper 的中心对齐。
circle-wrapper 的 width 和 height 被统一为 34rem，使其成为一个正圆形，并通过 margin: auto 实现水平居中。transform: rotate(23deg) 应用于整个数字环，使其整体旋转一个角度。

3. 数字元素精确定位

这是最关键的部分。每个 .circle 元素通过 transform 属性进行定位。该属性包含三个部分：

rotate(Xdeg): 将元素围绕其父容器中心旋转到指定角度。
translate(Ypx): 沿着当前旋转方向，将元素从中心向外平移 Ypx。这个 Ypx 值决定了数字距离中心点的径向距离。
rotate(-Zdeg): 第二次旋转，用于抵消第一次旋转和父容器旋转的影响，使数字文本保持水平。

核心调整在于 translate 值。 原始的 translate(251px) 可能不足以将数字推到菜单项外围。我们通过引入 deg-X-new 类，将 translate 值增加到 305px 或 325px，以扩大数字环的半径。

.circle {
  display: block;
  position: absolute;
  top: 54%; /* 相对于父级 circle-wrapper 定位 */
  left: 54%; /* 相对于父级 circle-wrapper 定位 */
  width: 50px;
  height: 50px;
  margin: -48px -48px -48px -53px; /* 微调，使其中心与定位点对齐 */
  background: red;
  border-radius: 51%;
  text-align: center;
  line-height: 50px;
}

/* 新的数字定位类 */
.deg-0-new {
  transform: rotate(45deg) translate(325px) rotate(-65deg); /* 调整 translate 值 */
  background: #5ede29;
  color: white;
  font-weight: 600;
}

.deg-45-new {
  transform: rotate(90deg) translate(325px) rotate(-110deg); /* 调整 translate 值 */
  background: #ffe816;
  color: white;
  font-weight: 600;
}

.deg-90-new {
  transform: rotate(135deg) translate(325px) rotate(-158deg); /* 调整 translate 值 */
  background: #f74015;
  color: white;
  font-weight: 600;
}

.deg-135-new {
  transform: rotate(180deg) translate(325px) rotate(-200deg); /* 调整 translate 值 */
  background: #54bef8;
  color: white;
  font-weight: 600;
}

.deg-180-new {
  transform: rotate(225deg) translate(305px) rotate(-248deg); /* 调整 translate 值 */
  background: #5ede29;
  color: white;
  font-weight: 600;
}

.deg-225-new {
  transform: rotate(270deg) translate(305px) rotate(-289deg); /* 调整 translate 值 */
  background: #ffe816;
  color: white;
  font-weight: 600;
}

.deg-270-new {
  transform: rotate(315deg) translate(315px) rotate(-338deg); /* 调整 translate 值 */
  background: #f74015;
  color: white;
  font-weight: 600;
}

.deg-315-new {
  background: #54bef8;
  transform: rotate(360deg) translate(325px) rotate(-380deg); /* 调整 translate 值 */
  color: white;
  font-weight: 600;
}

登录后复制

top: 54% 和 left: 54% 将 .circle 元素的初始定位点稍微偏离中心，这可能是为了微调布局或与 margin 配合使用。
margin: -48px -48px -48px -53px 进一步微调了数字元素的中心位置，使其更好地对齐。
translate(Ypx) 的值（如 325px, 305px, 315px）经过了细致调整，以确保数字环的半径与菜单项的半径相匹配，并根据视觉效果进行了微调。这些值可能需要根据实际的菜单大小和设计进行进一步的试验和调整。

完整示例代码

将上述HTML结构和CSS样式整合后，即可实现预期的圆形菜单外围数字环绕效果。

<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>
</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>

登录后复制

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

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

.cn-button {
  position: absolute;
  z-index: 11;
  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 {
  width: 100%;
  position: absolute;
  top: 100px;
}

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

.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-0 { /* 原始类，此处不再直接使用，但保留作为参考 */
  transform: rotate(45deg) translate(251px) rotate(-65deg);
  background: #5ede29;
  color: white;
  font-weight: 600;
}

.deg-0-new { /* 新的定位类 */
  transform: rotate(45deg) translate(325px) rotate(-65deg);
  background: #5ede29;
  color: white;
  font-weight: 600;
}

.deg-45 { /* 原始类 */
  transform: rotate(90deg) translate(251px) rotate(-110deg);
  background: #ffe816;
  color: white;
  font-weight: 600;
}

.deg-45-new { /* 新的定位类 */
  transform: rotate(90deg) translate(32

登录后复制

以上就是CSS实现圆形菜单外围数字环绕布局教程的详细内容，更多请关注php中文网其它相关文章！