147 lines
4.6 KiB
HTML
147 lines
4.6 KiB
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>
|