可以使用
HTML和
CSS结合JavaScript来实现点击
扇形展开效果菜单。以下是一个简单的示例：
HTML代码：
```
html
<div class="circle-menu">
<div class="circle-menu-item" id="item1"></div>
<div class="circle-menu-item" id="item2"></div>
<div class="circle-menu-item" id="item3"></div>
<div class="circle-menu-item" id="item4"></div>
<div class="circle-menu-item" id="item5"></div>
<div class="circle-menu-item" id="item6"></div>
<div class="circle-menu-item" id="item7"></div>
<div class="circle-menu-item" id="item8"></div>
<div class="circle-menu-item" id="item9"></div>
<div class="circle-menu-item" id="item10"></div>
<div class="circle-menu-item" id="item11"></div>
<div class="circle-menu-item" id="item12"></div>
<div class="circle-menu-trigger"></div>
</div>
```
CSS样式：
```
css
.circle-menu {
position: relative;
width: 200px;
height: 200px;
margin: 50px auto;
}
.circle-menu-item {
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin: -25px 0 0 -25px;
border-radius: 50%;
background-color: #333;
opacity: 0;
transform: scale(0);
transition: all 0.3s ease-in-out;
}
.circle-menu-trigger {
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin: -25px 0 0 -25px;
border-radius: 50%;
background-color: #fff;
border: 2px solid #333;
cursor: pointer;
z-index: 100;
}
.circle-menu-trigger.active ~ .circle-menu-item {
opacity: 1;
transform: scale(1);
}
#item1 {
transform: translate(-100px, 0);
}
#item2 {
transform: translate(-70px, -70px);
}
#item3 {
transform: translate(0, -100px);
}
#item4 {
transform: translate(70px, -70px);
}
#item5 {
transform: translate(100px, 0);
}
#item6 {
transform: translate(70px, 70px);
}
#item7 {
transform: translate(0, 100px);
}
#item8 {
transform: translate(-70px, 70px);
}
#item9 {
transform: translate(-85px, -30px);
}
#item10 {
transform: translate(85px, -30px);
}
#item11 {
transform: translate(85px, 30px);
}
#item12 {
transform: translate(-85px, 30px);
}
```
JavaScript
代码：
```javascript
var trigger = document.querySelector('.circle-menu-trigger');
trigger.addEventListener('click', function() {
trigger.classList.toggle('active');
});
```
在上面的示例中，通过
HTML代码定义了一个菜单圆形容器和12个菜单项，以及一个触发器元素。通过
CSS样式定义了菜单项的样式和触发器的样式，并且通过
CSS3动画将菜单项隐藏，并在触发器被激活时显示。通过JavaScript
代码监听点击触发器的事件，并在触发器被点击时切换样式类，从而实现菜单的展开和收缩效果。
868
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
