基于vue实现圆形菜单栏组件

-ms-transform: skew(-60deg) rotate(-70deg) scale(1);
-moz-transform: skew(-60deg) rotate(-70deg) scale(1);
transform: skew(-60deg) rotate(-70deg) scale(1);
-webkit-backface-visibility: hidden;
-webkit-transition: opacity 0.3s, color 0.3s;
-moz-transition: opacity 0.3s, color 0.3s;
transition: opacity 0.3s, color 0.3s;
}

/* for a central angle x, the list items must be skewed by 90-x degrees
in our case x=40deg so skew angle is 50deg
items should be rotated by x, minus (sum of angles - 180)2s (for this demo) */

.cn-wrapper li:first-child {
transform: rotate(-10deg) skew(60deg);
}

.cn-wrapper li:nth-child(2) {
transform: rotate(20deg) skew(60deg);
}

.cn-wrapper li:nth-child(3) {
transform: rotate(50deg) skew(60deg);
}

.cn-wrapper li:nth-child(4) {
transform: rotate(80deg) skew(60deg);
}

.cn-wrapper li:nth-child(5) {
transform: rotate(110deg) skew(60deg);
}
.cn-wrapper li:nth-child(6) {
transform: rotate(140deg) skew(60deg);
}
.cn-wrapper li:nth-child(7) {
transform: rotate(170deg) skew(60deg);
}
.cn-wrapper li:nth-child(8) {
transform: rotate(200deg) skew(60deg);
}
.cn-wrapper li:nth-child(9) {
transform: rotate(230deg) skew(60deg);
}
.cn-wrapper li:nth-child(10) {
transform: rotate(260deg) skew(60deg);
}
.cn-wrapper li:nth-child(11) {
transform: rotate(290deg) skew(60deg);
}
.cn-wrapper li:nth-child(12) {
transform: rotate(320deg) skew(60deg);
}

.cn-wrapper li:nth-child(odd) a {
background-color: #a11313;
background-color: hsla(0, 88%, 63%, 1);
}

.cn-wrapper li:nth-child(even) a {
background-color: #a61414;
background-color: hsla(0, 88%, 65%, 1);
}

/* active style */
.cn-wrapper li.active a {
/* background-color: #b31515;
background-color: hsla(0, 88%, 70%, 1); */
background-color: rgba(135, 137, 155, 0.52);
border: solid 0px #f2cc81;
}

/* hover style */
.cn-wrapper li:not(.active) a:hover,
.cn-wrapper li:not(.active) a:active,
.cn-wrapper li:not(.active) a:focus {
background-color: rgba(135, 137, 155, 0.52);
border: solid 0px #f2cc81;
}

.li-img {
width: 50px;
margin-bottom: 44px;
margin-left: -30px;
}
.li-text {
color: #f2cc81;
font-size: 20px;
line-height: 1.4;
width: 76px;
margin: 0 calc(50% - 50px);
}
</style>

父组件调用：

 <div class="making-panel">
     <CirclePanel :title="title" :panel="panel"
           @clickTab="clickTabCircle"
           @clickPanel="clickPanel" ></CirclePanel>
  </div>

总结

以上所述是小编给大家介绍的基于vue实现圆形菜单栏组件,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！