css旋转圆形菜单

基础概念

CSS旋转圆形菜单是一种通过CSS动画实现的交互式菜单，通常用于网站的导航或功能选择。这种菜单以圆形为基础，通过旋转和展开的方式展示菜单项，为用户提供直观且有趣的交互体验。

类型

静态圆形菜单：菜单项固定在一个圆形上，用户点击某个菜单项后，该菜单项会突出显示。
动态旋转菜单：用户点击中心按钮后，菜单项会围绕中心旋转展开，再次点击则收起。
层级圆形菜单：菜单项可以分层展开，类似于树状结构，用户可以逐层深入。

应用场景

网站导航：用于网站的顶部导航栏，提供主要功能的快速访问。
应用启动界面：在应用启动时展示，提供用户选择不同功能入口。
游戏界面：在游戏界面中作为功能选择或设置菜单，增加游戏的趣味性。

示例代码

以下是一个简单的CSS旋转圆形菜单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS旋转圆形菜单</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        .circle-menu {
            position: relative;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
        .circle-menu button {
            position: absolute;
            width: 50px;
            height: 50px;
            border: none;
            background-color: transparent;
            font-size: 20px;
            color: #333;
            cursor: pointer;
            transition: transform 0.3s ease-in-out;
        }
        .circle-menu button:nth-child(1) {
            transform: rotate(0deg) translate(75px) rotate(0deg);
        }
        .circle-menu button:nth-child(2) {
            transform: rotate(45deg) translate(75px) rotate(-45deg);
        }
        .circle-menu button:nth-child(3) {
            transform: rotate(90deg) translate(75px) rotate(-90deg);
        }
        .circle-menu button:nth-child(4) {
            transform: rotate(135deg) translate(75px) rotate(-135deg);
        }
        .circle-menu button:nth-child(5) {
            transform: rotate(180deg) translate(75px) rotate(-180deg);
        }
        .circle-menu button:nth-child(6) {
            transform: rotate(225deg) translate(75px) rotate(-225deg);
        }
        .circle-menu button:nth-child(7) {
            transform: rotate(270deg) translate(75px) rotate(-270deg);
        }
        .circle-menu button:nth-child(8) {
            transform: rotate(315deg) translate(75px) rotate(-315deg);
        }
        .circle-menu.active button {
            transform: rotate(calc(var(--rotate) * 45deg)) translate(75px) rotate(calc(var(--rotate) * -45deg));
        }
    </style>
</head>
<body>
    <div class="circle-menu" id="circleMenu">
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>4</button>
        <button>5</button>
        <button>6</button>
        <button>7</button>
        <button>8</button>
    </div>
    <script>
        const circleMenu = document.getElementById('circleMenu');
        let isRotating = false;
        let startAngle = 0;
        let currentAngle = 0;

        circleMenu.addEventListener('mousedown', (e) => {
            isRotating = true;
            startAngle = e.clientX;
        });

        document.addEventListener('mousemove', (e) => {
            if (!isRotating) return;
            const dx = e.clientX - startAngle;
            currentAngle = (currentAngle + dx) % 360;
            circleMenu.style.setProperty('--rotate', currentAngle / 45);
            startAngle = e.clientX;
        });

        document.addEventListener('mouseup', () => {
            isRotating = false;
        });
    </script>
</body>
</html>