python/TangDou/CSP-J/AcWingTraining/T6/module展示页.html

<!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 {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f0f2f5;
            perspective: 1000px; /* 添加透视效果 */
        }

        .icon-container {
    position: relative;
    /* 增大容器尺寸以适应椭圆路径 */
    width: 700px;  /* 原500px */
    height: 500px; /* 原500px */
    animation: container-rotate 20s linear infinite;
}
/* 移除图标自身的旋转动画 */
.icon-link {
    position: absolute;
    width: 80px;
    height: 80px;
    left: 50%;
    top: 50%;
    /* 关键修改：移除transform-style: preserve-3d以避免继承旋转 */
    /* transform-style: preserve-3d; */
}

/* 重新定义图标定位 - 仅使用位置变换，不添加旋转补偿 */
.icon-link:nth-child(1) {
    transform: translate(-50%, -50%) translate(250px, 0);
}

.icon-link:nth-child(2) {
    transform: translate(-50%, -50%) translate(176.8px, 176.8px); /* 250*cos(45°), 250*sin(45°) */
}

.icon-link:nth-child(3) {
    transform: translate(-50%, -50%) translate(0, 250px);
}

.icon-link:nth-child(4) {
    transform: translate(-50%, -50%) translate(-176.8px, 176.8px);
}

.icon-link:nth-child(5) {
    transform: translate(-50%, -50%) translate(-250px, 0);
}

.icon-link:nth-child(6) {
    transform: translate(-50%, -50%) translate(-176.8px, -176.8px);
}

.icon-link:nth-child(7) {
    transform: translate(-50%, -50%) translate(0, -250px);
}

.icon-link:nth-child(8) {
    transform: translate(-50%, -50%) translate(176.8px, -176.8px);
}

/* 保持容器旋转动画 */
.icon-container {
    position: relative;
    width: 700px;
    height: 500px;
    animation: container-rotate 20s linear infinite;
}

@keyframes container-rotate {
    from { transform: rotateZ(0deg); }
    to { transform: rotateZ(-360deg); }
}
    </style>
</head>
<body>
    <div class="icon-container">
        <a href="#module1" class="icon-link"><div class="icon">1</div></a>
        <a href="#module2" class="icon-link"><div class="icon">2</div></a>
        <a href="#module3" class="icon-link"><div class="icon">3</div></a>
        <a href="#module4" class="icon-link"><div class="icon">4</div></a>
        <a href="#module5" class="icon-link"><div class="icon">5</div></a>
        <a href="#module6" class="icon-link"><div class="icon">6</div></a>
        <a href="#module7" class="icon-link"><div class="icon">7</div></a>
        <a href="#module8" class="icon-link"><div class="icon">8</div></a>
    </div>
<script>
// 简化文字定位逻辑 - 仅跟随容器旋转，不进行独立坐标计算
function updateTextPositions() {
    const container = document.querySelector('.icon-container');
    const style = window.getComputedStyle(container);
    const zRotation = parseZRotation(style.transform);

    // 为每个图标创建独立的文字固定容器
    document.querySelectorAll('.icon-link').forEach((link, index) => {
        // 获取或创建文字容器
        let textContainer = link.querySelector('.fixed-text-container');
        if (!textContainer) {
            textContainer = document.createElement('div');
            textContainer.className = 'fixed-text-container';
            textContainer.innerHTML = `<div class="icon-label">${link.querySelector('.icon').textContent}</div>`;
            link.appendChild(textContainer);
        }

        // 应用精确的反向旋转补偿
        textContainer.querySelector('.icon-label').style.transform = `rotate(${-zRotation}deg)`;
    });

    requestAnimationFrame(updateTextPositions);
}

// 新增：精确解析Z轴旋转角度的函数
function parseZRotation(transform) {
    const match = transform.match(/rotateZ\(([^)]+)\)/);
    if (match) {
        return parseFloat(match[1]);
    }
    return 0;
}


// 初始化文本容器
document.querySelectorAll('.icon-link').forEach((link, index) => {
    const textContainer = document.createElement('div');
    textContainer.className = 'text-container';
    textContainer.innerHTML = `<div class="icon-label">${link.querySelector('.icon-label').textContent}</div>`;
    document.querySelector('.icon-container').appendChild(textContainer);
});

// 启动位置更新
updateTextPositions();
</script>
</body>
</html>