用css制作一个类似IOS悬浮球的作品点击悬浮球会弹出n个选项再次点击关闭

以下是一个简单的实现：

HTML代码：

<div class="float-ball">
  <div class="ball"></div>
  <ul class="options">
    <li>选项1</li>
    <li>选项2</li>
    <li>选项3</li>
  </ul>
</div>

CSS代码：

.float-ball {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
}

.ball {
  width: 60px;
  height: 60px;
  background-color: #007aff;
  border-radius: 50%;
  cursor: pointer;
}

.options {
  display: none;
  position: absolute;
  bottom: 80px;
  right: -140px;
  width: 120px;
  padding: 10px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: rgba(0,0,0,0.2) 0px 0px 10px;
  z-index: 999;
}

.options li {
  margin: 10px 0;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}

.options li:hover {
  background-color: #f3f3f3;
}

.float-ball:hover .options {
  display: block;
}

解释：

使用position: fixed将悬浮球固定在页面上，设置bottom和right属性控制位置；
使用border-radius: 50%将悬浮球变成圆形，使用background-color设置背景色；
使用cursor: pointer将悬浮球变成手型鼠标，表示可以点击；
使用display: none将选项列表隐藏起来，使用position: absolute将其定位在悬浮球下方，使用right属性控制其位置；
使用background-color和box-shadow属性美化选项列表；
使用float-ball:hover .options选择器，当悬浮球hover时，显示选项列表。

点击悬浮球时，利用JavaScript实现显示/隐藏选项列表的功能：

var ball = document.querySelector('.ball');
var options = document.querySelector('.options');

ball.addEventListener('click', function() {
  if (options.style.display === 'block') {
    options.style.display = 'none';
  } else {
    options.style.display = 'block';
  }
});
``