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

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

步骤 1: HTML 结构调整

首先，我们需要对 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
  

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-nav {  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-nav 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-nav li:first-child {  transform: rotate(45deg) skew(45deg);  background: #5ede29;}.csstransforms .opened-nav li:nth-child(2) {  transform: rotate(90deg) skew(45deg);  background: #ffe816;}.csstransforms .opened-nav li:nth-child(3) {  transform: rotate(135deg) skew(45deg);  background: #f74015;}.csstransforms .opened-nav li:nth-child(4) {  transform: rotate(180deg) skew(45deg);  background: #54bef8;}.csstransforms .opened-nav li:nth-child(5) {  transform: rotate(225deg) skew(45deg);  background: #5ede29;}.csstransforms .opened-nav li:nth-child(6) {  transform: rotate(270deg) skew(45deg);  background: #ffe816;}.csstransforms .opened-nav li:nth-child(7) {  transform: rotate(315deg) skew(45deg);  background: #f74015;}.csstransforms .opened-nav 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 修改包括：

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

Axiom

Axiom是一个浏览器扩展，用于自动化重复任务和web抓取。

163 查看详情 .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 值，以精确定位每个数字。 这种方法可以灵活地应用于各种圆形菜单布局，并根据需要进行定制。

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