运城市盐湖区信雨科技有限公司
首页 > 营销学院 > 技术知识

使用 CSS 围绕圆形菜单排列数字

使用 css 围绕圆形菜单排列数字

本文将指导你如何使用 CSS 将数字环绕在圆形菜单周围。我们将通过添加额外的 HTML结构和调整 CSS 样式来实现数字的精确定位，确保它们围绕圆形菜单均匀分布。最终实现一个美观且功能完善的圆形菜单布局。

步骤 1: HTML 结构调整

首先，我们需要对 HTML 结构进行一些调整，以便更好地控制圆形菜单和数字的布局。主要添加了两个新的 wrapper：cn-button-wrapper 和 circle-wrapper-outer。

<div class="component csstransforms">
  <div class="cn-button-wrapper">
    <button class="cn-button" id="cn-button">
      @@##@@
    </button>
  </div>

  <div class="cn-wrapper opened-n*" id="cn-wrapper">
    <ul>
      <li>
        <a @click="showMore" href="j*ascript:void(0)"><span class="learn">Learn</span></a>
      </li>
      <li>
        <a @click="showMore2" href="j*ascript:void(0)"><span class="learn1">Review</span></a>
      </li>
      <li>
        <a @click="showMore3" href="j*ascript:void(0)"><span class="learn2">Evaluate</span></a>
      </li>
      <li>
        <a @click="showMore4" href="j*ascript:void(0)"><span class="learn3">Sign-up</span></a>
      </li>
      <li>
        <a @click="showMore5" href="j*ascript:void(0)"><span class="learn4">Engage</span></a>
      </li>
      <li>
        <a @click="showMore6" href="j*ascript:void(0)"><span class="learn5">Share</span></a>
      </li>
      <li>
        <a @click="showMore7" href="j*ascript:void(0)"><span class="learn6">Impact</span></a>
      </li>
      <li>
        <a @click="showMore8" href="j*ascript:void(0)"><span class="learn7">Transform</span></a>
      </li>
    </ul>
  </div>

  <!-- End of N* 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>
  • cn-button-wrapper: 用于包裹中心按钮，并控制其在组件中的位置。
  • circle-wrapper-outer: 用于包裹包含数字的 circle-wrapper，并提供绝对定位的上下文。

步骤 2: CSS 样式调整

接下来，我们需要调整 CSS 样式，以确保数字围绕圆形菜单正确排列。

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

/* Added */
.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;
}

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

.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 {
  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;
}

/* Added */
.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;
}

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

.deg-90 {
  transform: rotate(135deg) translate(251px) rotate(-158deg);
  background: #f74015;
  color: white;
  font-weight: 600;
}

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

.deg-135 {
  transform: rotate(180deg) translate(251px) rotate(-200deg);
  background: #54bef8;
  color: white;
  font-weight: 600;
}

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

.deg-180 {
  transform: rotate(225deg) translate(251px) rotate(-248deg);
  background: #5ede29;
  color: white;
  font-weight: 600;
}

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

.deg-225 {
  transform: rotate(270deg) translate(251px) rotate(-289deg);
  background: #ffe816;
  color: white;
  font-weight: 600;
}

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

.deg-270 {
  transform: rotate(315deg) translate(251px) rotate(-338deg);
  background: #f74015;
  color: white;
  font-weight: 600;
}

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

.deg-315 {
  background: #54bef8;
  transform: rotate(360deg) translate(251px) rotate(-380deg);
  color: white;
  font-weight: 600;
}

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

.btnDeactivated {
  background-color: #f7f4f4 !important;
  color: rgb(184 124 38);
  border: 2px solid #a57c2633 !important;
}

.csstransforms .cn-wrapper {
  position: absolute;
  z-index: 10;
  top: 100px; /* Added */
  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;
}

.csstransforms .cn-wrapper:after {
  content: ".";
  display: block;
  font-size: 2em;
  width: 6.2em;
  height: 6.2em;
  position: absolute;
  left: 50%;
  margin-left: -3.1em;
  top: 50%;
  margin-top: -3.1em;
  border-radius: 50%;
  z-index: 10;
  color: transparent;
}

.csstransforms .opened-n* {
  border-radius: 50%;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  pointer-events: auto;
}

.cn-wrapper ul {
  position: relative;
  list-style: none;
  margin: 0;
}

.csstransforms .cn-wrapper li {
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  margin-left: -12em;
  width: 12em;
  height: 12em;
  font-size: 1.5em;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-transform: rotate(60deg) skew(60deg);
  -moz-transform: rotate(60deg) skew(60deg);
  -ms-transform: rotate(60deg) skew(60deg);
  transform: rotate(60deg) skew(60deg);
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  pointer-events: none;
  border: 4px solid #fff;
}

.csstransforms .cn-wrapper li a {
  position: absolute;
  right: -7.25em;
  bottom: -7.25em;
  display: block;
  width: 14.5em;
  height: 14.5em;
  border-radius: 50%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  color: #271b1b;
  text-align: center;
  text-decoration: none;
  font-size: 1.2em;
  line-height: 2;
  -webkit-transform: skew(-44deg) rotate(-68deg);
  -moz-transform: skew(-44deg) rotate(-68deg);
  -ms-transform: skew(-44deg) rotate(-68deg);
  transform: skew(-44deg) rotate(-68deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  pointer-events: auto;
  letter-spacing: 1px;
}

.csstransforms .cn-wrapper li a span {
  position: relative;
  top: 3.8em;
  display: block;
  font-size: 0.7em;
  font-weight: bolder;
  text-transform: uppercase;
  left: -22px;
}

.csstransforms .cn-wrapper li a:hover {
  color: white;
}

.csstransforms .cn-wrapper li a {
  top: 32px;
  transition: top 1s ease 0s;
}

.csstransforms .cn-wrapper li a:active,
.csstransforms .cn-wrapper li a:focus {
  color: rgb(255, 255, 255);
  font-size: 30px;
  font-weight: 600;
  text-shadow: 2px 2px 10px black;
  top: 19px;
}

.csstransforms .cn-wrapper li a:focus {
  position: fixed;
}

.csstransforms .opened-n* li {
  -webkit-transition: all 0.3s ease 0.3s;
  -moz-transition: all 0.3s ease 0.3s;
  transition: all 0.3s ease 0.3s;
}

.csstransforms .opened-n* li:first-child {
  transform: rotate(45deg) skew(45deg);
  background: #5ede29;
}

.csstransforms .opened-n* li:nth-child(2) {
  transform: rotate(90deg) skew(45deg);
  background: #ffe816;
}

.csstransforms .opened-n* li:nth-child(3) {
  transform: rotate(135deg) skew(45deg);
  background: #f74015;
}

.csstransforms .opened-n* li:nth-child(4) {
  transform: rotate(180deg) skew(45deg);
  background: #54bef8;
}

.csstransforms .opened-n* li:nth-child(5) {
  transform: rotate(225deg) skew(45deg);
  background: #5ede29;
}

.csstransforms .opened-n* li:nth-child(6) {
  transform: rotate(270deg) skew(45deg);
  background: #ffe816;
}

.csstransforms .opened-n* li:nth-child(7) {
  transform: rotate(315deg) skew(45deg);
  background: #f74015;
}

.csstransforms .opened-n* li:nth-child(8) {
  background: #54bef8;
  transform: rotate(360deg) skew(45deg);
}

.no-csstransforms .cn-wrapper {
  overflow: hidden;
  margin: 10em auto;
  padding: 0.5em;
  text-align: center;
}

.no-csstransforms .cn-wrapper ul {
  display: inline-block;
}

.no-csstransforms .cn-wrapper li {
  float: left;
  width: 5em;
  height: 5em;
  background-color: #fff;
  text-align: center;
  font-size: 1em;
  line-height: 5em;
}

.no-csstransforms .cn-wrapper li a {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.no-csstransforms .cn-wrapper li a:hover,
.no-csstransforms .cn-wrapper li a:active,
.no-csstransforms .cn-wrapper li a:focus {
  background-color: #f8f8f8;
}

.no-csstransforms .cn-wrapper li.active a {
  background-color: #6f325c;
  color: #fff;
}

.no-csstransforms .cn-button {
  display: none;
}

.learn {
  transform: rotate(23deg);
}

.learn1 {
  transform: rotate(-20deg);
}

.learn2 {
  transform: rotate(-67deg);
}

.learn3 {
  transform: rotate(-112deg);
}

.learn4 {
  transform: rotate(-157deg);
}

.learn5 {
  transform: rotate(-201deg);
}

.learn6 {
  transform: rotate(-247deg);
}

.learn7 {
  transform: rotate(69deg);
}

关键的 CSS 修改包括：

AI at Meta AI at Meta

Facebook 旗下的AI研究平台

AI at Meta 72 查看详情 AI at Meta
  • .component: 添加 display: flex 和 justify-content: center，用于水平居中内容。
  • .cn-button-wrapper: 设置宽度、高度，并使用 display: flex 和 justify-content: center 及 align-items: center 来居中按钮。
  • .circle-wrapper-outer: 设置宽度，position: absolute 和 top 值，用于定位数字圆环。
  • .circle-wrapper: 设置宽度、高度，并使用 margin-left: auto 和 margin-right: auto 使其水平居中。
  • *`.deg--new**: 为每个数字的定位添加新的 CSS 类，并调整translate` 值，使其围绕圆形菜单正确排列。

步骤 3: 调整数字的位置

通过调整 .deg-*-new 类中的 translate 值，可以微调数字的位置，以达到最佳的视觉效果。 例如：

.deg-0-new {
  transform: rotate(45deg) translate(325px) rotate(-65deg);
  background: #5ede29;
  color: white;
  font-weight: 600;
}

根据实际情况，修改 translate(325px) 中的数值，直到数字排列在满意的位置。

总结

通过以上步骤，我们成功地将数字环绕在圆形菜单周围。 关键在于添加额外的 HTML 结构，并调整 CSS 样式，特别是 transform 属性中的 translate 值，以精确定位每个数字。 这种方法可以灵活地应用于各种圆形菜单布局，并根据需要进行定制。

logo

以上就是使用 CSS 围绕圆形菜单排列数字的详细内容，更多请关注其它相关文章！


# 相关文章  # 优化关键字排行seo软件  # 茂名网站优化排名服务商  # 2016seo优化  # 论坛营销推广平台怎么做  # 网站优化软件哪个品牌好  # 文昌网站制作和推广  # 问答式推广与关键字营销  # 栾城区国产网站建设报价  # 义马抖音营销推广  # 网络公关协议seo  # 应用于  # 实际情况  # 解决问题  # 中文网  # css  # 自适应  # 全选  # 网页设计  # 双击  # 使其  # red  # overflow  # 绝对定位  # 排列  # app  # go  # html  # java  # javascript 


相关栏目： 【 Google疑问12 】 【 Facebook疑问10 】 【 优化推广96088 】 【 技术知识133117 】 【 IDC资讯59369 】 【 网络运营7196 】 【 IT资讯61894 】


相关推荐： Lar*el 关联查询：同时筛选父表与子表数据的高效策略  《美篇》取消会员自动续费方法  如何在Podman容器中运行Composer_Docker替代品Podman的PHP与Composer容器化实践  React应用中Commerce.js数据加载与状态管理最佳实践  铁路12306官网登录入口 铁路12306在线购票官方平台  多多买菜门店端app订单查看方法  《新三国志曹操传》游历事件袁尚突围攻略  c++类和对象到底是什么_c++面向对象编程基础  花生壳内网映射新方案  宝妈做视频号该写什么标签话题？宝妈关注的话题有哪些？  如何查询国外邮政编码_国外邮政编码查询的多种有效途径  苹果自助维修计划支持哪些设备机型  win11自带录屏文件保存在哪里 Win11 Game Bar录制视频默认路径【分享】  店铺如何关联视频号推广？视频号推广有什么用？  PHP魔术方法__set与__isset：设计考量、性能权衡与静态分析的视角  sublime怎么快速在浏览器中预览HTML_sublime配置View in Browser教程  sublime怎么在文件中显示代码结构大纲_sublime符号列表功能  向往的生活小游戏启动处_向往的生活小游戏立即启动  解决CSS布局中意外顶部空白问题的教程  响应式设计中动态背景颜色条的实现指南  如何在CSS中实现盒模型多列间距_grid-gap与padding结合  mysql中外键约束如何使用_mysql FOREIGN KEY操作  晨报|开发商暗示《空洞骑士：丝之歌》DLC开发中 《合金装备4》有望重制  12306售票时间最新规定 | 网上订票和车站窗口时间一样吗  《海底捞》点外卖方法  《地下城堡4：骑士与破碎编年史》墓穴挑战125攻略  《幻兽帕鲁》手游帕鲁捕捉技巧分享  菜鸟裹裹怎样获得取件码_菜鸟裹裹获得取件码步骤  J*a里如何处理ArithmeticException并防止除零_算术异常防护策略解析  Fedora怎么安装 Fedora Workstation安装步骤  《大润发优鲜》充值方法介绍  SQLAlchemy 2.0 与 Pydantic 模型类型安全集成指南  FullCalendar自定义按钮样式定制指南  QQ邮箱手机版网页版 QQ邮箱登录入口地址  MongoDB聚合管道：高效统计列表中各项的文档数量  键盘保修需要什么_键盘售后维修流程  悟空浏览器如何恢复关闭的标签页 悟空浏览器撤销关闭网页快捷键设置  如何查询个人病历记录  qq邮箱怎么注册_QQ邮箱注册步骤与注意事项  雨课堂官网在线登录 网页版雨课堂登录链接  《雷电模拟器》自动点击设置方法  《深林》冬季章节图文攻略  J*a列表元素格式化输出教程  魔法祈幻界兑换码礼包大全  铁路12306官网入口 铁路12306中国铁路官网登录首页  mysql归档数据怎么导出为csv_mysql归档数据导出为csv文件的方法  解决CSS容器溢出问题：使用calc()实现精确布局与边距控制  微信网页版在线登录 微信网页版在线使用入口  在PHP环境中正确加载HTML资源：CSS样式与图片路径指南  sf漫画官网登录入口直达_sf漫画官方正版网址 

 2025-11-19

了解您产品搜索量及市场趋势，制定营销计划

同行竞争及网站分析保障您的广告效果

点击免费数据支持

提交您的需求，1小时内享受我们的专业解答。

运城市盐湖区信雨科技有限公司

运城市盐湖区信雨科技有限公司

运城市盐湖区信雨科技有限公司是一家深耕海外推广领域十年的专业服务商，作为谷歌推广与Facebook广告全球合作伙伴，聚焦外贸企业出海痛点，以数字化营销为核心，提供一站式海外营销解决方案。公司凭借十年行业沉淀与平台官方资源加持，打破传统外贸获客壁垒，助力企业高效开拓全球市场，成为中小企业出海的可靠合作伙伴。

4008744355

 8156699

 13765294890

 8156699@qq.com

服务/方案/案例/支持

产品服务
Google推广
社交推广
网站建设
Bing 推广
Yandex推广
解决方案
B2B网站推广
B2C电商推广
海外品牌推广
APP海外推广
营销案例
品牌营销推广
B2C电商推广
B2B海外推广
APP应用游戏
营销网站案例
营销学院
Google疑问
Facebook疑问
优化推广
技术知识
IDC资讯
网络运营
IT资讯

关于我们

公司简介
报名培训
加入我们

©  运城市盐湖区信雨科技有限公司 版权所有 晋ICP备2025069848号 

Notice

We and selected third parties use cookies or similar technologies for technical purposes and, with your consent, for other purposes as specified in the cookie policy.
You can consent to the use of such technologies by closing this notice, by interacting with any link or button outside of this notice or by continuing to browse otherwise.