如何用HTML和CSS创建点击中心圆后展开六等分交互式圆盘菜单？

菜单 menu center div 217 来源： 2025-03-22

要创建一个点击中心圆后展开六等分交互式圆盘菜单，你可以使用HTML和CSS来实现。以下是一个简单的实现步骤：

1. HTML结构

首先，创建一个HTML文件，定义菜单的结构。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>六等分圆盘菜单</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="menu-container">
        <div class="center-circle" id="centerCircle">
            <span>菜单</span>
        </div>
        <div class="menu-item" style="--i: 0;">1</div>
        <div class="menu-item" style="--i: 1;">2</div>
        <div class="menu-item" style="--i: 2;">3</div>
        <div class="menu-item" style="--i: 3;">4</div>
        <div class="menu-item" style="--i: 4;">5</div>
        <div class="menu-item" style="--i: 5;">6</div>
    </div>

    <script src="script.js"></script>
</body>
</html>

2. CSS样式

接下来，创建一个CSS文件（styles.css），定义菜单的样式和动画效果。

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.menu-container {
    position: relative;
    width: 200px;
    height: 200px;
}

.center-circle {
    position: absolute;
    width: 60px;
    height: 60px;
    background-color: #3498db;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 16px;
    cursor: pointer;
    z-index: 2;
    transition: transform 0.3s ease;
}

.menu-item {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: #2ecc71;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 14px;
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    z-index: 1;
}

.menu-container.active .menu-item {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(calc(360deg / 6 * var(--i))) translate(100px) rotate(calc(-360deg / 6 * var(--i)));
}

.menu-container.active .center-circle {
    transform: rotate(180deg);
}

3. JavaScript交互

最后，创建一个JavaScript文件（script.js），用于处理点击事件并切换菜单的展开和收起状态。

document.getElementById('centerCircle').addEventListener('click', function() {
    const menuContainer = document.querySelector('.menu-container');
    menuContainer.classList.toggle('active');
});

4. 解释

HTML部分：定义了一个包含中心圆和六个菜单项的容器。每个菜单项都有一个自定义属性 --i，用于在CSS中计算旋转角度。
CSS部分：
- .menu-container 是菜单的容器，设置为相对定位。
- .center-circle 是中心圆，设置为绝对定位，并居中。
- .menu-item 是每个菜单项，初始状态下透明度为0，通过 transform 属性进行旋转和位移。
- 当 .menu-container 添加 active 类时，菜单项会展开并显示出来。
JavaScript部分：监听中心圆的点击事件，切换 .menu-container 的 active 类，从而触发菜单的展开和收起动画。

5. 运行效果

当你点击中心圆时，六个菜单项会从中心圆周围展开，形成一个六等分的圆盘菜单。再次点击中心圆时，菜单项会收回到中心圆的位置。

你可以根据需要调整菜单项的数量、大小、颜色等样式，以及动画的速度和效果。

上一篇：如何优雅地在现有字体族中添加自定义字体？

下一篇：ECharts DataZoom滚动条圆角如何设置？