2分钟教你实现环形/扇形菜单(基础版) - CSDN文库

56 浏览量更新于2023-03-16 收藏 40KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

2分钟教你实现环形分钟教你实现环形/扇形菜单扇形菜单(基础版基础版)

前言前言

项目需要用到环形菜单，初略在网上找了一下，没有找到合适的，于是自己写了一个很简单的，后续再优化。

这个组件是基于react,但是原理都一样。

展开效果如下：

实现实现

css(less)

@centerIconSize: 30px;

.flex(@justify: flex-start, @align: center) {

justify-content: @justify;

align-items: @align;

display: flex;

}

.sector-menu-wrapper {

position: relative;

width: @centerIconSize;

margin: auto;

.center-icon {

.flex(center);

width: @centerIconSize;

height: @centerIconSize;

border-radius: 50%;

background: rgba(0, 0, 0, 0.3);

color: white;

cursor: pointer;

}

.sector-item {

position: absolute;

.flex(center);

width: @centerIconSize;

height: @centerIconSize;

border-radius: 50%;

background: rgba(0, 0, 0, 0.3);

cursor: pointer;

color: white;

top: 0;

left: 0;

transition: all linear 0.5s;

transform: translate(0, 0);

// display: none;

visibility: hidden;

}

.sector-list {

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

weixin_38499553

粉丝: 11
资源: 904

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈