求图中点击中心按钮弹出环绕按钮的动画名称及HTML、CSS实现方案

这个动画效果叫做径向弹出菜单（Radial Popup Menu），也常被称为浮动操作按钮菜单（FAB Menu），是一种紧凑的交互组件，通过点击中心按钮展开/收起周围的操作选项。

实现代码 #

HTML 结构 #

<div class="radial-menu">
  <button class="menu-toggle">+</button>
  <button class="menu-item">1</button>
  <button class="menu-item">2</button>
  <button class="menu-item">3</button>
  <button class="menu-item">4</button>
</div>

CSS 样式 #

/* 菜单容器：相对定位，作为子按钮的绝对定位参考 */
.radial-menu {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 50px;
}

/* 中心按钮样式 */
.menu-toggle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: none;
  background-color: #2196F3;
  color: white;
  font-size: 24px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

/* 子按钮基础样式：初始隐藏在中心位置 */
.menu-item {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background-color: #FFC107;
  color: black;
  font-size: 18px;
  cursor: pointer;
  top: 5px;
  left: 5px;
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s ease;
}

/* 展开状态下的子按钮径向位置 */
.radial-menu.expanded .menu-item:nth-child(2) {
  transform: translate(0, -120px);
  opacity: 1;
}
.radial-menu.expanded .menu-item:nth-child(3) {
  transform: translate(100px, -70px);
  opacity: 1;
}
.radial-menu.expanded .menu-item:nth-child(4) {
  transform: translate(100px, 70px);
  opacity: 1;
}
.radial-menu.expanded .menu-item:nth-child(5) {
  transform: translate(0, 120px);
  opacity: 1;
}

/* 中心按钮展开时的旋转效果 */
.radial-menu.expanded .menu-toggle {
  transform: rotate(45deg);
}

JavaScript 交互逻辑 #

const toggleBtn = document.querySelector('.menu-toggle');
const radialMenu = document.querySelector('.radial-menu');

toggleBtn.addEventListener('click', () => {
  radialMenu.classList.toggle('expanded');
});

效果说明 #

• 初始状态下，子按钮隐藏在中心按钮下方，透明度为0且缩放为0
• 点击中心加号按钮时，容器添加expanded类，子按钮通过transform移动到指定的径向位置，同时淡入并恢复原尺寸，中心按钮旋转45度
• 再次点击中心按钮，移除expanded类，子按钮回到中心位置并隐藏，中心按钮恢复初始状态

内容的提问来源于stack exchange，提问作者Waqar Ahmed