演示地址 http://win.ss
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>人皇-个人主页</title>
<style>
:root {
--bg-color: #e8f1ff;
--card-glass-bg: rgba(255, 255, 255, 0.08);
--card-glass-bg-hover: rgba(255, 255, 255, 0.12);
--text-primary: rgba(0, 110, 255, 0.7);
--text-hover: rgba(0, 110, 255, 1);
--text-secondary: rgba(0, 153, 255, 0.6);
--text-secondary-hover: rgba(0, 153, 255, 0.9);
--contact-bg: rgba(255, 255, 255, 0.1);
--contact-bg-hover: rgba(255, 255, 255, 0.15);
--glow-color: rgba(0, 110, 255, 0.2);
--star-color: rgba(0, 0, 0, 0.3);
}
@media (prefers-color-scheme: dark) {
:root[data-theme="auto"] {
--bg-color: #1a1a1a;
--card-glass-bg: rgba(18, 18, 18, 0.15);
--card-glass-bg-hover: rgba(18, 18, 18, 0.25);
--text-primary: rgba(0, 153, 255, 0.8);
--text-hover: rgba(0, 153, 255, 1);
--text-secondary: rgba(0, 153, 255, 0.6);
--text-secondary-hover: rgba(0, 153, 255, 0.9);
--contact-bg: rgba(255, 255, 255, 0.08);
--contact-bg-hover: rgba(255, 255, 255, 0.12);
--glow-color: rgba(0, 153, 255, 0.3);
--star-color: rgba(255, 255, 255, 0.5);
}
}
:root[data-theme="dark"] {
--bg-color: #1a1a1a;
--card-glass-bg: rgba(18, 18, 18, 0.15);
--card-glass-bg-hover: rgba(18, 18, 18, 0.25);
--text-primary: rgba(0, 153, 255, 0.8);
--text-hover: rgba(0, 153, 255, 1);
--text-secondary: rgba(0, 153, 255, 0.6);
--text-secondary-hover: rgba(0, 153, 255, 0.9);
--glow-color: rgba(0, 153, 255, 0.3);
--star-color: rgba(255, 255, 255, 0.5);
--card-glass-bg: rgba(18, 18, 18, 0.05);
--card-glass-bg-hover: rgba(18, 18, 18, 0.08);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--bg-color);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
transition: background-color 0.3s ease;
overflow: hidden;
}
.space-wrapper {
position: fixed;
width: 100vw;
height: 100vh;
transform-style: preserve-3d;
perspective: 800px;
z-index: -1;
}
.star {
position: absolute;
animation: space-travel 3s linear infinite, twinkle 1.5s ease-in-out infinite alternate;
will-change: transform, opacity;
contain: layout style paint;
transition: background-color 0.3s ease;
}
/* 星星本体 */
.star::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: var(--star-color);
border-radius: 50%;
}
/* 星光效果 */
.star::after {
content: '';
position: absolute;
top: -100%;
left: -100%;
width: 300%;
height: 300%;
background: radial-gradient(
circle at center,
var(--star-color) 0%,
rgba(255, 255, 255, 0.3) 15%,
transparent 50%
);
opacity: 0.5;
}
@keyframes space-travel {
0% { transform: translateZ(-500px) rotate(0deg); }
100% { transform: translateZ(500px) rotate(360deg); }
}
.container {
perspective: 1000px;
padding: 20px;
}
.card {
background: rgba(255, 255, 255, 0.05); /* 更低的透明度 */
backdrop-filter: blur(20px); /* 增强模糊效果 */
-webkit-backdrop-filter: blur(20px);
border-radius: 20px;
padding: 2.5rem;
width: 500px;
position: relative;
box-shadow:
0 8px 32px rgba(31, 38, 135, 0.1),
0 4px 8px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08); /* 微弱的边框 */
transform-style: preserve-3d;
transition: all 0.3s ease;
}
.card:hover {
background: rgba(255, 255, 255, 0.08); /* 悬浮时稍微增加不透明度 */
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.12),
0 8px 16px rgba(0, 0, 0, 0.08),
0 0 25px rgba(0, 153, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
}
.card-content {
display: flex;
align-items: center;
gap: 3rem;
position: relative;
z-index: 2;
}
.left-section {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
}
.avatar-container {
width: 120px;
height: 120px;
}
.avatar {
width: 100%;
height: 100%;
border-radius: 50%;
display: block;
border: 4px solid var(--text-secondary);
box-shadow:
0 8px 16px rgba(0, 0, 0, 0.1),
0 0 0 rgba(0, 153, 255, 0);
transition: all 0.3s ease;
object-fit: cover;
}
.card:hover .avatar {
border-color: var(--text-hover);
transform: scale(1.05);
box-shadow:
0 12px 20px rgba(0, 0, 0, 0.15),
0 0 15px var(--glow-color);
}
h1 {
color: var(--text-primary);
font-size: 1.75rem;
font-weight: 600;
margin: 0;
transition: color 0.3s ease;
}
.card:hover h1 {
color: var(--text-hover);
}
.contacts-container {
display: flex;
flex-direction: column;
gap: 1rem;
flex: 1;
}
.contact-item {
background: var(--contact-bg);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
padding: 0.8rem 1.2rem;
border-radius: 12px;
display: flex;
align-items: center;
gap: 1rem;
transition: all 0.3s ease;
cursor: pointer;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
background: rgba(255, 255, 255, 0.03); /* 更透明 */
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.contact-item:hover {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
background: var(--contact-bg-hover);
transform: translateX(5px) scale(1.02);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.contact-icon {
width: 24px;
height: 24px;
fill: var(--text-secondary);
transition: fill 0.3s ease;
flex-shrink: 0;
}
.contact-text {
color: var(--text-secondary);
text-decoration: none;
font-size: 1rem;
font-weight: 500;
transition: color 0.3s ease;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.contact-item:hover .contact-icon {
fill: var(--text-hover);
}
.contact-item:hover .contact-text {
color: var(--text-hover);
}
.theme-toggle {
position: fixed;
top: 20px;
right: 20px;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--card-glass-bg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
z-index: 1000;
padding: 0;
}
.theme-toggle:hover {
background: var(--card-glass-bg-hover);
transform: scale(1.05);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
.icon {
width: 24px;
height: 24px;
position: absolute;
transition: all 0.3s ease;
fill: var(--text-primary);
}
.sun-icon {
color: #FFA726;
}
.moon-icon {
color: #4FC3F7;
}
[data-theme="dark"] .sun-icon {
opacity: 0;
transform: rotate(90deg) scale(0);
}
[data-theme="dark"] .moon-icon {
opacity: 1;
transform: rotate(0) scale(1);
}
[data-theme="light"] .sun-icon,
[data-theme="auto"] .sun-icon {
opacity: 1;
transform: rotate(0) scale(1);
}
[data-theme="light"] .moon-icon,
[data-theme="auto"] .moon-icon {
opacity: 0;
transform: rotate(-90deg) scale(0);
}
@media screen and (max-width: 580px) {
.container {
padding: 15px;
}
.card {
padding: 1.5rem;
width: 100%;
}
.card-content {
flex-direction: column;
gap: 2rem;
}
.contacts-container {
width: 100%;
}
}
</style>
</head>
<body>
<div class="space-wrapper" id="spaceWrapper"></div>
<button class="theme-toggle" aria-label="切换主题">
<svg class="icon sun-icon" viewBox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<circle cx="12" cy="32" r="6">
<animate fill="freeze" attributeName="cy" dur="0.6s" values="32;12"/>
</circle>
<g>
<path stroke-dasharray="2" stroke-dashoffset="2" d="M12 19v1M19 12h1M12 5v-1M5 12h-1">
<animate fill="freeze" attributeName="d" begin="0.7s" dur="0.2s" values="M12 19v1M19 12h1M12 5v-1M5 12h-1;M12 21v1M21 12h1M12 3v-1M3 12h-1"/>
<animate fill="freeze" attributeName="stroke-dashoffset" begin="0.7s" dur="0.2s" values="2;0"/>
</path>
<path stroke-dasharray="2" stroke-dashoffset="2" d="M17 17l0.5 0.5M17 7l0.5 -0.5M7 7l-0.5 -0.5M7 17l-0.5 0.5">
<animate fill="freeze" attributeName="d" begin="0.9s" dur="0.2s" values="M17 17l0.5 0.5M17 7l0.5 -0.5M7 7l-0.5 -0.5M7 17l-0.5 0.5;M18.5 18.5l0.5 0.5M18.5 5.5l0.5 -0.5M5.5 5.5l-0.5 -0.5M5.5 18.5l-0.5 0.5"/>
<animate fill="freeze" attributeName="stroke-dashoffset" begin="0.9s" dur="0.2s" values="2;0"/>
</path>
<animateTransform attributeName="transform" dur="30s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/>
</g>
</g>
</svg>
<svg class="icon moon-icon" viewBox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-dasharray="4" stroke-dashoffset="4" stroke-linecap="round" stroke-linejoin="round">
<path d="M13 4h1.5M13 4h-1.5M13 4v1.5M13 4v-1.5">
<animate id="IconifyId192dbd2cc8e5e67db3" fill="freeze" attributeName="stroke-dashoffset" begin="0.7s;IconifyId192dbd2cc8e5e67db3.begin+6s" dur="0.4s" values="4;0"/>
<animate fill="freeze" attributeName="stroke-dashoffset" begin="IconifyId192dbd2cc8e5e67db3.begin+2s;IconifyId192dbd2cc8e5e67db3.begin+4s" dur="0.4s" values="4;0"/>
<animate fill="freeze" attributeName="stroke-dashoffset" begin="IconifyId192dbd2cc8e5e67db3.begin+1.2s;IconifyId192dbd2cc8e5e67db3.begin+3.2s;IconifyId192dbd2cc8e5e67db3.begin+5.2s" dur="0.4s" values="0;4"/>
<set fill="freeze" attributeName="d" begin="IconifyId192dbd2cc8e5e67db3.begin+1.8s" to="M12 5h1.5M12 5h-1.5M12 5v1.5M12 5v-1.5"/>
<set fill="freeze" attributeName="d" begin="IconifyId192dbd2cc8e5e67db3.begin+3.8s" to="M12 4h1.5M12 4h-1.5M12 4v1.5M12 4v-1.5"/>
<set fill="freeze" attributeName="d" begin="IconifyId192dbd2cc8e5e67db3.begin+5.8s" to="M13 4h1.5M13 4h-1.5M13 4v1.5M13 4v-1.5"/>
</path>
<path d="M19 11h1.5M19 11h-1.5M19 11v1.5M19 11v-1.5">
<animate id="IconifyId192dbd2cc8e5e67db4" fill="freeze" attributeName="stroke-dashoffset" begin="1.1s;IconifyId192dbd2cc8e5e67db4.begin+6s" dur="0.4s" values="4;0"/>
<animate fill="freeze" attributeName="stroke-dashoffset" begin="IconifyId192dbd2cc8e5e67db4.begin+2s;IconifyId192dbd2cc8e5e67db4.begin+4s" dur="0.4s" values="4;0"/>
<animate fill="freeze" attributeName="stroke-dashoffset" begin="IconifyId192dbd2cc8e5e67db4.begin+1.2s;IconifyId192dbd2cc8e5e67db4.begin+3.2s;IconifyId192dbd2cc8e5e67db4.begin+5.2s" dur="0.4s" values="0;4"/>
<set fill="freeze" attributeName="d" begin="IconifyId192dbd2cc8e5e67db4.begin+1.8s" to="M17 11h1.5M17 11h-1.5M17 11v1.5M17 11v-1.5"/>
<set fill="freeze" attributeName="d" begin="IconifyId192dbd2cc8e5e67db4.begin+3.8s" to="M18 12h1.5M18 12h-1.5M18 12v1.5M18 12v-1.5"/>
<set fill="freeze" attributeName="d" begin="IconifyId192dbd2cc8e5e67db4.begin+5.8s" to="M19 11h1.5M19 11h-1.5M19 11v1.5M19 11v-1.5"/>
</path>
<path d="M19 4h1.5M19 4h-1.5M19 4v1.5M19 4v-1.5">
<animate id="IconifyId192dbd2cc8e5e67db5" fill="freeze" attributeName="stroke-dashoffset" begin="2s;IconifyId192dbd2cc8e5e67db5.begin+6s" dur="0.4s" values="4;0"/>
<animate fill="freeze" attributeName="stroke-dashoffset" begin="IconifyId192dbd2cc8e5e67db5.begin+2s" dur="0.4s" values="4;0"/>
<animate fill="freeze" attributeName="stroke-dashoffset" begin="IconifyId192dbd2cc8e5e67db5.begin+1.2s;IconifyId192dbd2cc8e5e67db5.begin+3.2s" dur="0.4s" values="0;4"/>
<set fill="freeze" attributeName="d" begin="IconifyId192dbd2cc8e5e67db5.begin+1.8s" to="M20 5h1.5M20 5h-1.5M20 5v1.5M20 5v-1.5"/>
<set fill="freeze" attributeName="d" begin="IconifyId192dbd2cc8e5e67db5.begin+5.8s" to="M19 4h1.5M19 4h-1.5M19 4v1.5M19 4v-1.5"/>
</path>
</g>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 6 C7 12.08 11.92 17 18 17 C18.53 17 19.05 16.96 19.56 16.89 C17.95 19.36 15.17 21 12 21 C7.03 21 3 16.97 3 12 C3 8.83 4.64 6.05 7.11 4.44 C7.04 4.95 7 5.47 7 6 Z" transform="translate(0 22)">
<animateMotion fill="freeze" calcMode="linear" dur="0.6s" path="M0 0v-22"/>
</path>
</svg>
</button>
<div class="container">
<div class="card">
<div class="card-content">
<div class="left-section">
<div class="avatar-container">
<img src="https://6ke.li/wp-content/uploads/2024/08/20240803111600573-1722654960-renhuangV2.jpg" alt="人皇" class="avatar">
</div>
<h1>人皇</h1>
</div>
<div class="contacts-container">
<div class="contact-item">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 128 128"><path fill="#ed6c30" d="m86.6 26.5l28.09-7.47l-1.78-3.56L63.84 3.03l-32 6.75v2.49z"/><path fill="#ed6c30" d="m86.6 26.5l25.96-7.11l5.33 5.33l-1.06 54.76L86.6 95.12z"/><path fill="#ed6c30" d="m26.5 12.98l61.17 14.23l-1.78 66.84l-55.47-9.6l-7.12-5.68z"/><path fill="#fcc21b" d="M45 26.85L10.5 52.1l2.14 5.33L45.7 75.21l25.26-35.56v-5.33z"/><path fill="#855c52" d="M120.86 43.81c-.1-6.78.9-14.4-.59-21.23c-.29-1.33-.68-2.63-1.18-3.9c-2.58-6.42-9.03-7.68-15.02-9.41c-11.86-3.42-24.39-6.04-36.6-7.89C55.5-.43 44.8 2.58 33.17 5.19C25.08 7 21.29 11.16 20.57 19.48c-.6 6.93-.58 13.99-.49 21.03c-3.03 2.27-6.03 4.58-9.07 6.84a13.9 13.9 0 0 0-3.7 4.09c-.96 1.61-.08 3.58 1.19 4.76c2.12 1.98 4.12 4.03 6.77 5.33c1.74.87 3.44 1.9 5.11 2.98c.07 2.81.14 5.62.2 8.43c.03 1.51.06 3.02.08 4.53c.01.35.48 4.72 3.06 6.23c5.97 3.48 13.5 5.08 20.06 7.01c2.95.87 5.91 1.72 8.88 2.54c1.23.34 2.53.57 3.73.97c.99.32 3 .74 2.62 2.19c-.22.83-1.18.85-1.9 1c-1.1.22-2.21.36-3.3.56c-1.58.28-3.13.64-4.64 1.13c-2.44.79-4.99 1.91-6.74 3.85c-1.73 1.93-1.92 4.16-1.92 6.6v2.67c0 .7.06 1.45.24 2.16c-.04 3.21 2.66 6.23 7.67 8.5c4.53 2.06 10.6 3.41 17.08 3.81c1.33.08 2.63.12 3.89.12c5.5 0 11.21-.56 16.24-2.9c1.75-.81 3.78-1.78 4.9-3.42c1.37-2 1.15-4.61 1.17-6.91c.03-2.44.27-5.15-1.08-7.32c-1.5-2.41-4.15-3.98-6.68-5.13c-2.23-1.01-4.83-1.85-7.66-2.49v-.14c3.87.47 7.76.51 11.58-.49l.18-.07c.84-.12 1.66-.51 2.42-.83c2.52-1.04 5.08-1.92 7.65-2.83c4.08-1.45 8.07-3.19 11.88-5.25c2.72-1.48 6.55-3.17 8.42-5.71c3.3-4.49 2.14-11.29 2.32-16.51c.26-7.68.24-15.32.13-23M16.1 51.58c-.39-.05-.77-.22-1.16-.21c-.52-1.42 3.68-3.46 4.59-4.06c.22-.14.42-.3.63-.45c.32-.23.64-.46.97-.69c1.68-1.2 3.32-2.45 5.02-3.63c.13-.09.26-.19.39-.28c1.52-1.06 3.02-2.15 4.52-3.23c3.39-2.44 6.74-4.93 10.02-7.54l.18-.15c1.1-.88 2.13-1.96 3.49-2.42c1.41-.48 3.82.2 5.18.65c.62.21 1.44.4 1.95.79c1.08.85 1.31 2.31 1.59 3.56c.41 1.81.54 3.51.54 5.39c0 2.67.8 4.76-2.11 5.91c-2.03.8-4.31.7-6.43 1.18c-.02 0-.04.01-.07.01c-2.45.55-4.92 1.04-7.41 1.38c-3.85.53-7.65 1.23-11.46 2.02c-.2.04-.39.07-.58.11c-1.59.33-3.2.53-4.8.77c-.32.05-.65.1-.97.16c-.53.09-1.05.19-1.57.31c-.8.21-1.65.51-2.51.42m41.66-8c-.01-.82-.05-1.63-.05-2.45l-.12-2.18c1.19-.7 3.07-.35 4.39-.35c1.17 0 2.28.08 3.42.18c.58.05 1.6-.25 2.09.17c.83.7-.42 1.65-.86 2.21c-1.16 1.46-1.94 3.23-3.03 4.76c-.88 1.25-1.62 2.62-2.5 3.86c-.06.08-.12.16-.19.24c-.83 1.14-1.81 2.2-2.65 3.33c-1.58 2.12-3.14 4.26-4.62 6.45c-2.57 3.82-4.53 8.06-7.62 11.51c-.48.54-1.29 1.12-1.74.53c-.35-.45-.44-1.58-.57-2.14c-.52-2.2-.39-4.67-.53-6.94c-.16-2.42-.43-4.83-.43-7.25c0-1.26-.62-2.55-.32-3.82c.38-1.57 2.3-1.24 3.54-1.59c1.22-.35 2.44-.56 3.66-.89c1.34-.37 2.77-.58 4.13-.93c.65-.17 1.28-.35 1.87-.62c1.79-.79 2.13-2.24 2.13-4.08m-1.22-11c2.76-.35 7.62 1.42 9.77 2.83c1.28.85.64.91-.67.95c-1.42.05-2.86-.09-4.28.11c-1.08.15-2.55.31-3.58-.16c-.4-.18-.59-.39-.71-.67c-.07-.19-.11-.4-.14-.67c-.08-.65-.61-1.77-.39-2.39m-35.26 27.1c-.24-.16-.5-.31-.73-.5c-.08-.07-.17-.13-.25-.2c-.9-.72-1.79-1.43-2.72-2.11c-.94-.69-.8-1.09.18-1.38c.81-.23 1.64-.43 2.47-.63c.33-.08.64-.18.98-.25c1.77-.41 3.55-.76 5.35-1.07c2.28-.4 4.58-.76 6.8-1.09c1.37-.2 2.73-.52 4.13-.52h.24c.63-.03 1.15-.13 1.36.53c.39 1.25-.21 2.61-.03 3.88c.24 1.79.03 3.74.03 5.55c0 1.73-.08 3.47-.13 5.2c-.02.5.23 2.18-.08 2.55c-.41.49-1.3-.24-1.74-.5c-1.46-.87-2.91-1.94-4.43-2.68c-1.89-.92-3.72-1.95-5.57-2.97c-.2-.12-.38-.24-.58-.36c-.93-.56-1.8-1.14-2.71-1.78c-.83-.57-1.73-1.1-2.57-1.67m61.59 26.84c.04 2.06-.35 3.57-1.15 4.55c-1.08 1.32-2.92 1.69-5.43 1.22c-.08-.01-.15-.01-.23-.03c-.2-.04-.41-.07-.61-.12c-.28-.05-.57-.1-.85-.16c-3.73-.73-7.49-1.36-11.21-2.2c-1.87-.42-3.73-.85-5.61-1.3l-.85-.2c-.28-.07-.57-.13-.84-.2c-7.43-1.79-14.82-3.85-21.85-6.73c-1.96-.8-6.84-2.37-7.24-5.01c-.07-.5-.52-3.55-.5-5.09c.01-.88.02-1.81.02-2.76c.9.48 1.85.91 2.75 1.39c2.58 1.35 5.03 2.96 7.55 4.42c1.03.6 2.22.98 3.3 1.5c.98.47 1.83.94 2.88 1.2c1.69.4 3.39.73 4.84-.52a23.5 23.5 0 0 0 4.76-5.66c1.29-2.16 2.84-4.19 4.1-6.4c1.23-2.14 2.85-4.09 4.12-6.26c1.18-2.02 2.64-3.83 3.73-5.86c.23-.44.5-.87.74-1.3c.67.11 1.33.2 1.99.25c3.5.26 6.12.12 7.54-3.43c.66-1.65.38-3.63.38-5.39c0-2.36.17-5-.57-7.21c-1.14-3.38-4.87-4.36-7.94-5.05c-4.63-1.05-9.31-1.79-13.92-2.99c-4.31-1.12-8.79-2.38-13.16-3.22c-1.2-.23-2.42-.39-3.64-.45c-1.26-.07-2.6.02-3.52.72c-1.98 1.52-1.52 4.93-1.78 7.08c-.08.65-.08 1.32-.07 1.98c-1.38.83-2.75 1.66-4.08 2.57c0-7.1.03-12.42.16-13.34c.33-2.31.8-4.56 1.33-5.19c.93-1.13 2.03-1.56 3.22-1.65c5.14.29 10.84 1.9 16.18 3.35c6.18 1.69 12.62 2.35 18.74 4.27c1.35.42 2.75.52 4.1.94c1.08.33 2.17.6 3.27.85c1.48.34 3.04.93 4.52 1.46c5.86 2.1 4.69 9.36 4.88 14.46c.23 5.92.41 11.85.41 17.78c.01 9.55-.67 18.18-.46 27.73M63.89 16.9c-7.12-1.3-14.18-2.88-21.28-4.28c-1.68-.33-3.34-.82-5.02-1.17c-4.37-.91.82-2.18 2.29-2.43c1.95-.33 14.44-2.5 18.55-2.52c4.64-.03 9.26.51 14.33 1.45c6.33 1.17 12.53 2.84 18.87 3.97c3.68.65 7.26 1.84 10.88 2.73c.96.24 3.76.58 4.2 1.55c.82 1.78-14.6 5.09-16.96 5.16c-8.73.25-17.04-2.85-25.86-4.46m51.32 53.47c-.19 3.79-.12 6.19-.76 7.91c-1.2 3.25-6.39 5.32-6.39 5.32s-9.02 4.41-14.7 6.19c-5.69 1.78-3.92-7.11-3.92-7.11s.16-38.04 0-44.8c-.23-10.08 4.88-10.66 4.88-10.66l13.87-3.56c7.63-2.4 6.88 5.05 6.88 5.05s.75 29.34.14 41.66"/><path fill="#855c52" d="M45 107.03v7.07s.62 2.8 2.89 3.87s7.6 4.53 18.8 4.8s18.13-3.6 18.13-3.6s2.27-.93 2.4-3.33s.16-6.19.16-6.19z"/><path fill="#78a3ad" d="M77.64 103.25c1.58.5 3.13 1.12 4.55 1.76c3.93 1.78 5.25 3.61 5.19 4.64c-.02.19-.08.38-.18.58c-.24.5-.76 1.03-1.52 1.55c-.59.4-1.33.8-2.22 1.17c-3.05 1.27-7.81 2.27-14.05 2.27c-1.18 0-2.39-.04-3.63-.11c-5.98-.37-11.51-1.59-15.58-3.44c-.46-.21-.88-.42-1.27-.62c-.87-.46-1.58-.92-2.13-1.36c-.74-.59-1.22-1.15-1.49-1.63c-.23-.39-.33-.74-.31-1.02c.09-1.5 2.18-2.5 3.33-3.03c1.25-.58 2.58-1 3.91-1.34c1.57-.4 3.27-.83 4.88-.96c5.18-.42 10.59-.09 15.76.49c1.54.16 3.17.55 4.76 1.05"/><g fill="#855c52"><path d="M74.33 105.74v-9.48l-16.39-3.57v12.54c-.11 1.73 3.48 3.35 8.01 3.63c4.52.28 8.28-.89 8.38-2.62c.02-.17-.04-.34-.1-.51z"/><path d="M67.26 111.04c-.47 0-.95-.01-1.44-.04c-2.45-.15-4.75-.67-6.5-1.46c-3.21-1.45-3.58-3.4-3.51-4.43V92.7c0-.65.29-1.26.8-1.66a2.2 2.2 0 0 1 1.79-.43l16.4 3.57c.98.21 1.68 1.08 1.68 2.09v9.48c0 .06-.01.13-.01.19c.01.16.02.33 0 .52c-.19 2.8-3.71 4.58-9.21 4.58m-7.19-5.99c.54.53 2.69 1.48 6.01 1.69c3.19.21 5.37-.45 6.05-.87c-.08-.35-.06-.68.07-1v-6.88l-12.13-2.64z"/></g></svg>
<a href="mailto:6@6.ke" class="contact-text">6@6.ke</a>
</div>
<div class="contact-item">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 20 20"><path fill="#1D8CE0" d="M18.496 13.607c-.134-1.931-1.372-3.55-2.088-4.387c.1-.243.341-1.653-.593-2.615q.003-.035.002-.068C15.817 2.743 13.237.012 10 0C6.763.013 4.183 2.743 4.183 6.537q0 .035.002.068c-.934.962-.692 2.372-.593 2.615c-.715.837-1.953 2.456-2.088 4.387c-.024.508.051 1.248.288 1.577c.289.4 1.081-.081 1.648-1.362c.158.594.521 1.5 1.345 2.649c-1.378.33-1.771 1.752-1.307 2.53c.327.548 1.075.999 2.365.999c2.296 0 3.31-.645 3.763-1.095q.138-.147.394-.146q.256-.001.394.146c.453.45 1.467 1.095 3.762 1.095c1.29 0 2.039-.45 2.366-.999c.464-.778.07-2.2-1.307-2.53c.824-1.15 1.188-2.055 1.345-2.649c.567 1.281 1.36 1.763 1.648 1.362c.237-.33.312-1.07.288-1.577"/></svg>
<span class="contact-text">6908506</span>
</div>
<div class="contact-item">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path fill="#07C160" d="M9.5 4C5.36 4 2 6.69 2 10c0 1.89 1.08 3.56 2.78 4.66L4 17l2.5-1.5c.89.31 1.87.5 2.91.5A5.2 5.2 0 0 1 9 14c0-3.31 3.13-6 7-6c.19 0 .38 0 .56.03C15.54 5.69 12.78 4 9.5 4m-3 2.5a1 1 0 0 1 1 1a1 1 0 0 1-1 1a1 1 0 0 1-1-1a1 1 0 0 1 1-1m5 0a1 1 0 0 1 1 1a1 1 0 0 1-1 1a1 1 0 0 1-1-1a1 1 0 0 1 1-1M16 9c-3.31 0-6 2.24-6 5s2.69 5 6 5c.67 0 1.31-.08 1.91-.25L20 20l-.62-1.87C20.95 17.22 22 15.71 22 14c0-2.76-2.69-5-6-5m-2 2.5a1 1 0 0 1 1 1a1 1 0 0 1-1 1a1 1 0 0 1-1-1a1 1 0 0 1 1-1m4 0a1 1 0 0 1 1 1a1 1 0 0 1-1 1a1 1 0 0 1-1-1a1 1 0 0 1 1-1"/></svg>
<span class="contact-text">YiQunShi</span>
</div>
</div>
</div>
</div>
</div>
<script>
function initTheme() {
const themeToggle = document.querySelector('.theme-toggle');
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
const root = document.documentElement;
const storedTheme = localStorage.getItem('theme') || 'auto';
let themeChangeRequest;
const setTheme = (theme) => {
cancelAnimationFrame(themeChangeRequest);
themeChangeRequest = requestAnimationFrame(() => {
root.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
});
};
setTheme(storedTheme);
themeToggle.addEventListener('click', () => {
const currentTheme = root.getAttribute('data-theme');
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
setTheme(newTheme);
});
prefersDarkScheme.addEventListener('change', (e) => {
if (root.getAttribute('data-theme') === 'auto') {
setTheme(e.matches ? 'dark' : 'light');
}
});
}
function createStarField() {
const wrapper = document.getElementById('spaceWrapper');
const starCount = 150;
const maxSize = 2;
const fragment = document.createDocumentFragment();
for (let i = 0; i < starCount; i++) {
const star = document.createElement('div');
star.className = 'star';
const x = Math.random() * window.innerWidth;
const y = Math.random() * window.innerHeight;
const size = Math.random() * maxSize + 0.5;
Object.assign(star.style, {
left: `${x}px`,
top: `${y}px`,
width: `${size}px`,
height: `${size}px`,
animationDelay: `${Math.random() * 3}s`,
animationDuration: `${3 + Math.random()}s`
});
fragment.appendChild(star);
}
wrapper.innerHTML = '';
wrapper.appendChild(fragment);
}
function init3DCard() {
const card = document.querySelector('.card');
let rafId;
card.addEventListener('mousemove', (e) => {
cancelAnimationFrame(rafId);
rafId = requestAnimationFrame(() => {
const rect = card.getBoundingClientRect();
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
const mouseX = e.clientX - centerX;
const mouseY = e.clientY - centerY;
const rotateX = (mouseY / (rect.height / 2)) * 8;
const rotateY = -(mouseX / (rect.width / 2)) * 8;
card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
});
});
card.addEventListener('mouseleave', () => {
cancelAnimationFrame(rafId);
card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)';
});
}
// 初始化
window.addEventListener('DOMContentLoaded', () => {
createStarField();
init3DCard();
initTheme();
});
// 响应窗口大小变化
let resizeTimeout;
window.addEventListener('resize', () => {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(createStarField, 200);
});
</script>
</body>
</html>```
