欢迎来到雄杰鑫电商资讯网
技术教程

使用 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 124124 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 修改包括：

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

html 更好地 使其 应用于 app 实际情况 以确保 css javascript java go red 排列 auto 关键在于 flex overflow display 类中 如何使用 这种方法 来实现 position transform margin 绝对定位

相关文章

按ESC键退出。