html + css 实现点击扇形展开效果菜单

可以使用HTML和CSS结合JavaScript来实现点击扇形展开效果菜单。以下是一个简单的示例：

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样式：

.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代码：

var trigger = document.querySelector('.circle-menu-trigger');
trigger.addEventListener('click', function() {
  trigger.classList.toggle('active');
});

在上面的示例中，通过HTML代码定义了一个菜单圆形容器和12个菜单项，以及一个触发器元素。通过CSS样式定义了菜单项的样式和触发器的样式，并且通过CSS3动画将菜单项隐藏，并在触发器被激活时显示。通过JavaScript代码监听点击触发器的事件，并在触发器被点击时切换样式类，从而实现菜单的展开和收缩效果。