本文将指导你如何使用 CSS 将数字环绕在圆形菜单周围。我们将通过添加额外的 HTML结构和调整 CSS 样式来实现数字的精确定位，确保它们围绕圆形菜单均匀分布。最终实现一个美观且功能完善的圆形菜单布局。
步骤 1: HTML 结构调整
首先，我们需要对 HTML 结构进行一些调整，以便更好地控制圆形菜单和数字的布局。主要添加了两个新的 wrapper：cn-button-wrapper 和 circle-wrapper-outer。
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 值，以精确定位每个数字。 这种方法可以灵活地应用于各种圆形菜单布局，并根据需要进行定制。
以上就是使用 CSS 围绕圆形菜单排列数字的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1596923.html
微信扫一扫 
支付宝扫一扫 
