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

要实现点击扇形展开效果菜单，需要使用CSS中的transform和transition属性。以下是一种实现方式：

HTML结构：

<div class="menu">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
  <div class="item item4"></div>
  <div class="item item5"></div>
  <div class="center"></div>
</div>

CSS样式：

.menu {
  position: relative;
  width: 200px;
  height: 200px;
}
.item {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #ccc;
  border-radius: 50%;
  transition: transform 0.5s ease;
}
.item1 {
  top: -25px;
  left: 75px;
}
.item2 {
  top: 35px;
  left: 35px;
}
.item3 {
  top: 75px;
  left: -25px;
}
.item4 {
  top: 35px;
  left: -85px;
}
.item5 {
  top: -25px;
  left: -45px;
}
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background-color: #333;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

JavaScript代码：

var menu = document.querySelector('.menu');
var items = document.querySelectorAll('.item');
var center = document.querySelector('.center');

var isOpen = false;

center.addEventListener('click', function() {
  if (isOpen) {
    // 关闭菜单
    menu.classList.remove('open');
    items.forEach(function(item, index) {
      item.style.transform = 'rotate(0deg)';
    });
  } else {
    // 打开菜单
    menu.classList.add('open');
    items.forEach(function(item, index) {
      item.style.transform = 'rotate(' + (index * 72) + 'deg)';
    });
  }
  
  isOpen = !isOpen;
});

在上面的代码中，我们通过JavaScript监听中心圆的点击事件，并根据菜单是否打开来决定是展开还是收起菜单。当菜单打开时，我们给菜单容器添加open类名，并将每个菜单项按照一定角度旋转，从而形成扇形展开效果。当菜单关闭时，我们将open类名移除，并将每个菜单项旋转回初始状态。