轮盘导航菜单

原创 已于 2025-06-27 15:05:46 修改 · 289 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #css #css3

于 2025-05-13 10:14:00 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮盘导航菜单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Arial', sans-serif;
            background: #1a1a2e;
            color: white;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }
        
        .compass {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 50px auto;
        }
        
        .center-circle {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80px;
            height: 80px;
            background: #4e54c8;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            font-weight: bold;
            box-shadow: 0 0 20px rgba(78, 84, 200, 0.5);
            z-index: 10;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .center-circle:hover {
            transform: translate(-50%, -50%) scale(1.1);
            box-shadow: 0 0 30px rgba(78, 84, 200, 0.8);
        }
        
        .nav-item {
            position: absolute;
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #8f94fb, #4e54c8);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 5;
        }
        
        .nav-item:hover {
            transform: scale(1.1);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
        }
        
        .nav-item.top {
            top: 0;
            left: 50%;
            transform: translateX(-50%);
        }
        
        .nav-item.right {
            top: 50%;
            right: 0;
            transform: translateY(-50%);
        }
        
        .nav-item.bottom {
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }
        
        .nav-item.left {
            top: 50%;
            left: 0;
            transform: translateY(-50%);
        }
        
        .nav-item.active {
            background: linear-gradient(135deg, #f46b45, #eea849);
            transform: scale(1.1);
        }
        
        .content {
            text-align: center;
            margin-top: 30px;
            max-width: 500px;
            padding: 0 20px;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.5s ease;
        }
        
        .content.show {
            opacity: 1;
            transform: translateY(0);
        }
        
        h1 {
            margin-bottom: 20px;
            color: #8f94fb;
        }
        
        .footer {
            position: fixed;
            bottom: 20px;
            width: 100%;
            text-align: center;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.6);
        }
        
        .footer a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
        }
        
        @media (max-width: 480px) {
            .compass {
                width: 250px;
                height: 250px;
            }
            
            .center-circle, .nav-item {
                width: 70px;
                height: 70px;
                font-size: 13px;
            }
        }
    </style>
</head>
<body>
    <h1>轮盘导航菜单</h1>
    
    <div class="compass">
        <div class="nav-item top" data-section="home">首页</div>
        <div class="nav-item right" data-section="services">服务</div>
        <div class="center-circle">菜单</div>
        <div class="nav-item bottom" data-section="about">关于</div>
        <div class="nav-item left" data-section="contact">联系</div>
    </div>
    
    <div class="content" id="content">
        <p>请点击轮盘上的选项查看不同内容</p>
    </div>
    
    <div class="footer">
        ©2023 轮盘导航菜单
    </div>

    <script>
        // 导航项数据
        const sections = {
            home: {
                title: "首页",
                content: "欢迎访问我们的网站首页。这是一个使用轮盘导航的创意设计，为您提供独特的用户体验。"
            },
            services: {
                title: "我们的服务",
                content: "我们提供专业的网页设计与开发服务，包括前端开发、UI/UX设计和响应式布局。"
            },
            about: {
                title: "关于我们",
                content: "我们是一支充满激情的设计开发团队，致力于创造美观且功能强大的网站应用。"
            },
            contact: {
                title: "联系我们",
                content: "电话: 123-456-7890<br>邮箱: info@example.com<br>地址: 某市某区某街道123号"
            }
        };
        
        // 获取DOM元素
        const navItems = document.querySelectorAll('.nav-item');
        const centerCircle = document.querySelector('.center-circle');
        const contentDiv = document.getElementById('content');
        
        // 添加点击事件
        navItems.forEach(item => {
            item.addEventListener('click', function() {
                // 移除所有active类
                navItems.forEach(nav => nav.classList.remove('active'));
                
                // 为当前点击项添加active类
                this.classList.add('active');
                
                // 获取对应的内容
                const section = this.getAttribute('data-section');
                const sectionData = sections[section];
                
                // 更新内容区域
                contentDiv.innerHTML = `
                    <h2>${sectionData.title}</h2>
                    <p>${sectionData.content}</p>
                `;
                
                // 显示内容区域
                contentDiv.classList.add('show');
                
                // 中心圆圈动画
                centerCircle.style.transform = 'translate(-50%, -50%) scale(0.9)';
                setTimeout(() => {
                    centerCircle.style.transform = 'translate(-50%, -50%)';
                }, 300);
            });
        });
        
        // 中心圆圈点击事件
        centerCircle.addEventListener('click', function() {
            // 移除所有active类
            navItems.forEach(nav => nav.classList.remove('active'));
            
            // 重置内容
            contentDiv.innerHTML = '<p>请点击轮盘上的选项查看不同内容</p>';
            
            // 中心圆圈动画
            this.style.transform = 'translate(-50%, -50%) scale(1.2)';
            setTimeout(() => {
                this.style.transform = 'translate(-50%, -50%)';
            }, 300);
        });
        
        // 初始动画
        setTimeout(() => {
            navItems.forEach((item, index) => {
                setTimeout(() => {
                    item.style.opacity = '1';
                    item.style.transform = item.style.transform || 'translate(0)';
                }, index * 100);
            });
        }, 500);
    </script>
</body>
</html>

ziblog
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值