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

程序猿 • 2025年12月23日 12:08:22 • 好文分享 • 阅读 0

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

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

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

理解布局挑战

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

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

HTML结构优化

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

原始HTML结构（部分）:

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

优化后的HTML结构:

          
              Learn
      Review
      Evaluate
      Sign-up
      Engage
      Share
      Impact
      Transform
    
  
        1
    2
    3
    4
    5
    6
    7
    8

结构调整说明:

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样式整合后，即可实现预期的圆形菜单外围数字环绕效果。

        
            Learn
      Review
      Evaluate
      Sign-up
      Engage
      Share
      Impact
      Transform
    
  
      1
    2
    3
    4
    5
    6
    7
    8

.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实现圆形菜单外围数字环绕布局教程的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1597538.html

打赏

微信扫一扫

支付宝扫一扫

0 0

关于作者

程序猿签约作者

402.0K 文章

0 评论

1 粉丝

这个人很懒，什么都没有留下～

JavaScript：利用按钮和标志位优雅控制函数内循环

上一篇 2025年12月23日 12:08:17

Django UpdateView 关联模型与图片上传：更新用户档案的完整指南

下一篇 2025年12月23日 12:08:25

好文分享

JavaScript：利用按钮和标志位优雅控制函数内循环

本文将详细介绍在javascript中，如何通过结合使用按钮事件、全局标志变量以及递归`settimeout`模式，实现对函数内部模拟循环的启动与停止控制。这种方法避免了传统`for`循环的阻塞问题，并提供了用户友好的交互方式来管理长时间运行的异步操作。引言：前端循环控制的挑战在前端开发中，执行…

程序猿
2025年12月23日
0000
好文分享

React与Tailwind CSS：实现可点击链接与自定义样式

在react与tailwind css项目中，实现可点击链接并进行样式定制是一个常见需求。由于tailwind的预设样式可能覆盖浏览器默认的链接样式，导致标签与普通文本无异。本文将详细指导如何在不依赖额外npm包的情况下，通过classname属性为标签添加视觉区分和交互效果，同时探讨更复杂的路由场…

程序猿
2025年12月23日
0000
好文分享

CSS选择器：根据子元素文本内容选择父元素的限制与替代方案

标准css无法直接根据子元素文本内容选择其父元素。本文将深入探讨这一局限性，并提供多种替代方案，包括利用结构化css选择器、原生javascript以及jquery的`:contains()`选择器。通过这些方法，开发者可以实现基于子元素文本内容的动态样式调整，从而提升网页交互性和视觉表现力。在网…

程序猿
2025年12月23日
0000
好文分享

JavaScript实现：在字符串指定位置插入空格

本文介绍如何使用JavaScript在用户输入的社保号码字符串中，在特定位置（前4个字符后）插入一个空格，以提高可读性。通过正则表达式和事件监听器，可以实现这一功能，确保只插入一个空格，且不影响用户输入体验。在处理用户输入时，为了提升可读性，有时需要在特定位置插入空格。例如，对于社保号码、银行卡号…

程序猿
2025年12月23日
0000
好文分享

ASP.NET MVC视图中动态替换URL路径语言代码的教程

本教程将指导您如何在asp.net mvc视图中安全且精准地替换url路径中的语言代码。针对传统字符串替换的局限性，我们将介绍一种基于正则表达式的视图辅助函数方法，确保仅替换url开头部分的语言标识，从而提供更健壮的解决方案，并包含完整的代码示例和使用注意事项。在ASP.NET MVC应用程序中，…

程序猿
2025年12月23日
0000
好文分享

掌握CSS层叠上下文：将下拉菜单叠加在地图之上

本文将深入探讨如何利用css的position和z-index属性，解决将下拉菜单等交互元素精确叠加在全屏背景元素（如地图）上方的问题。通过调整元素的定位方式和层叠顺序，确保下拉菜单在视觉上处于地图之上，实现更灵活和用户友好的界面布局。在现代网页设计中，将交互式UI元素（如下拉菜单、模态框）叠加在…

程序猿
2025年12月23日
0000
好文分享

解决Axios POST请求405错误的CORS配置指南

本文旨在解决使用axios向php后端发送post请求时遇到的405 method not allowed错误。核心问题在于跨域资源共享（cors）策略中缺少对post方法的允许。教程将详细解释405错误的原因，并提供通过在php响应头中添加`access-control-allow-methods…

程序猿
2025年12月23日
0000
好文分享

R语言教程：使用stringr包高效解析复杂字符串并提取结构化数据

本教程详细介绍如何在r语言中，利用`stringr`包结合正则表达式，从包含html或xml片段的复杂字符串列中高效提取特定结构化数据。文章通过实际案例演示了如何使用`str_extract_all`和`str_replace_all`函数，精准定位并抽取所需信息，最终将非结构化文本转化为可分析的数…

程序猿
2025年12月23日
0000
好文分享

JavaScript日程调度器：实现数据本地存储与页面重载持久化

本教程详细讲解如何利用web storage api中的localstorage，在javascript日程调度器中实现用户输入数据的持久化。通过示例代码演示了数据的保存、加载和更新机制，确保页面刷新后内容不丢失，从而提升用户体验和应用实用性。在构建Web应用程序时，尤其是像日程调度器这类需要用户…

程序猿
2025年12月23日
0000
好文分享

Google Apps Script教程：实现数据提交时自动插入日期时间戳

本教程详细指导如何利用google apps script，在向google表格追加数据时，自动在指定列（例如第六列）插入当前日期和时间戳。通过修改`appendrow`函数，开发者可以轻松实现数据录入的自动化时间记录，提升数据追踪的准确性和效率。在日常数据管理中，为每条新录入的数据自动添加创建时…

程序猿
2025年12月23日
0000
好文分享

Python爬虫：循环遍历HTML并追踪指定链接

本文详细介绍了如何使用python的`urllib`和`beautifulsoup`库实现网页链接的迭代追踪。教程将指导读者如何编写代码，从一个起始url开始，连续访问并解析网页，每次提取并跟随页面上的特定链接（例如第三个链接），从而实现多层深度的数据抓取。文章重点讲解了在循环中正确管理url变量和…

程序猿
2025年12月23日
0000
好文分享

构建健壮的AJAX联系表单：状态管理与用户反馈指南

本文详细探讨了在使用ajax实现web联系表单时常见的两个问题：提交成功后状态文本颜色错误及表单未能重置，以及在输入错误后重新提交时，“正在发送”状态未能正确显示。通过深入分析javascript中`indexof()`方法的误用和状态文本更新逻辑的缺陷，文章提供了具体的代码修正方案。教程旨在帮助开…

程序猿
2025年12月23日
0000
好文分享

JavaScript动态操作元素样式与类：实现可切换的UI状态

本教程详细阐述了如何使用javascript高效地实现ui元素的点击选中与取消选中功能。通过采用单一事件监听器和`classlist` api，而非传统的`classname`赋值，可以避免事件绑定失效的问题，并确保样式管理更加灵活和健壮。文章将提供具体的代码示例，并强调在前端开发中动态管理元素状态…

程序猿
2025年12月23日
0000
好文分享

动态控制固定元素可见性：基于滚动位置和屏幕尺寸的实现教程

本教程将深入探讨如何在网页中根据用户的滚动位置和当前可见的页面区域，动态地显示或隐藏固定定位的元素。我们将介绍使用现代的 `intersection observer api` 和传统的 `getboundingclientrect()` 方法，并结合 css 媒体查询，实现响应式且性能优化的固定元…

程序猿
2025年12月23日
0000
好文分享

解决纯CSS加载动画伪元素延迟不同步问题：原理、调试与优化

本文深入探讨纯css加载动画中伪元素animation-delay行为与预期不符的问题。通过分析animation-delay和animation-play-state的交互机制，提供了一种移除不必要延迟以实现动画立即错位启动的优化方案。同时，文章强调了利用chrome开发者工具进行动画调试的重要性…

程序猿
2025年12月23日
0000
好文分享

CSS悬停联动：克服父元素与兄弟元素选择器限制的JavaScript方案

本文旨在解决css无法直接通过子元素悬停状态选择其父元素或前一个兄弟元素的难题。通过结合javascript的事件监听机制（`mouseover`和`mouseout`）与css的类选择器，我们能够动态地向父元素添加或移除特定类，进而利用css规则实现复杂的、联动式的悬停效果，使得鼠标悬停在某个子元…

程序猿
2025年12月23日
0000
好文分享

优化Django Admin外键选择显示：利用__str__方法提升用户体验

本文旨在解决django管理后台中，关联模型（如外键）在下拉选择框中显示不直观的问题。通过详细讲解并示例如何为模型定义`__str__`方法，我们将展示如何将默认的数字id或泛型对象表示替换为更具描述性和用户友好的字段值，从而显著提升管理大量数据时的操作效率和用户体验。在Django的管理后台中，…

程序猿
2025年12月23日
0000
好文分享

CSS实现文本悬停即时显示与缓慢渐隐效果

本文将详细介绍如何利用css的`transition`属性，结合`:hover`和`:not(:hover)`伪类，实现文本在鼠标悬停时即时显示（如颜色变化），而在鼠标移开时缓慢渐隐的效果。通过精确控制过渡持续时间，可以创建出用户体验更佳的动态交互元素。 1. 理解需求：即时显示与缓慢渐隐在现代网…

程序猿
2025年12月23日
0000
好文分享

创建并动态设置JavaScript中的嵌套Div

本文介绍了如何使用 JavaScript 在页面加载后动态创建并设置嵌套的 `div` 元素，包括设置样式、属性以及添加内容。同时，对比了使用 `createElement` 和 `innerHTML` 两种方式，并讨论了如何动态创建和修改元素属性。使用 createElement 动态创建嵌套 …

程序猿
2025年12月23日
0000
好文分享

解决PrimeNG p-password组件宽度自适应难题：深度解析与实践

本教程旨在解决primeng `p-password`组件在布局中无法正确自适应宽度的问题。通过详细阐述`[style]`和`[inputstyle]`属性的正确使用方法，我们将展示如何确保密码输入框完美填充其容器，从而提升用户界面的视觉一致性和响应性。文章包含示例代码和关键注意事项，帮助开发者轻松…

程序猿
2025年12月23日
0000