1140
14
<!DOCTYPE html>
<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-bg: #e8f1ff;
--shadow-dark: #c4ccda;
--shadow-light: #ffffff;
--text-primary: rgba(0, 110, 255, 0.7);
--text-hover: rgba(0, 110, 255, 1);
--text-secondary: rgba(0, 110, 255, 0.6);
--text-secondary-hover: rgba(0, 110, 255, 0.9);
--border-color: rgba(255, 255, 255, 0.4);
--glow-color: rgba(0, 110, 255, 0.2);
}
@media (prefers-color-scheme: dark) {
:root[data-theme="auto"] {
--bg-color: #1a1a1a;
--card-bg: #242424;
--shadow-dark: #141414;
--shadow-light: #2c2c2c;
--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);
--border-color: rgba(255, 255, 255, 0.1);
--glow-color: rgba(0, 153, 255, 0.3);
}
}
:root[data-theme="dark"] {
--bg-color: #1a1a1a;
--card-bg: #242424;
--shadow-dark: #141414;
--shadow-light: #2c2c2c;
--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);
--border-color: rgba(255, 255, 255, 0.1);
--glow-color: rgba(0, 153, 255, 0.3);
}
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.2s ease;
}
.card {
background: var(--card-bg);
border-radius: 20px;
padding: 3rem;
width: 100%;
max-width: 320px;
text-align: center;
position: relative;
box-shadow:
20px 20px 60px var(--shadow-dark),
-20px -20px 60px var(--shadow-light);
border: 1px solid var(--border-color);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.card:hover {
transform: translateY(-5px);
box-shadow:
25px 25px 65px var(--shadow-dark),
-25px -25px 65px var(--shadow-light);
}
.avatar-container {
position: relative;
width: 120px;
height: 120px;
margin: 0 auto 2rem;
}
.avatar {
width: 120px;
height: 120px;
border-radius: 50%;
display: block;
background: var(--card-bg);
position: relative;
border: 4px solid var(--text-secondary);
box-shadow:
8px 8px 16px var(--shadow-dark),
-8px -8px 16px var(--shadow-light);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
object-fit: cover;
}
.card:hover .avatar {
border-color: var(--text-hover);
transform: scale(1.05);
box-shadow:
12px 12px 20px var(--shadow-dark),
-12px -12px 20px var(--shadow-light),
0 0 15px var(--glow-color);
}
h1 {
margin: 0 0 1.5rem;
color: var(--text-primary);
font-size: 1.75rem;
font-weight: 600;
text-shadow: 2px 2px 4px var(--shadow-dark);
position: relative;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.card:hover h1 {
color: var(--text-hover);
}
.email-container {
background: var(--card-bg);
padding: 0.7rem 1.2rem;
border-radius: 25px;
display: inline-block;
box-shadow:
inset 3px 3px 5px var(--shadow-dark),
inset -3px -3px 5px var(--shadow-light);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.email {
color: var(--text-secondary);
text-decoration: none;
font-size: 0.95rem;
font-weight: 500;
letter-spacing: 0.3px;
position: relative;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
display: inline-block;
}
.card:hover .email {
color: var(--text-secondary-hover);
transform: scale(1.02);
}
.theme-toggle {
position: fixed;
top: 20px;
right: 20px;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--card-bg);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
5px 5px 10px var(--shadow-dark),
-5px -5px 10px var(--shadow-light);
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1000;
padding: 0;
}
.theme-toggle:hover {
transform: scale(1.05);
}
.theme-toggle:active {
transform: scale(0.95);
}
.icon {
width: 24px;
height: 24px;
position: absolute;
transition: all 0.2s ease;
fill: var(--text-primary);
}
.sun-icon {
color: #FFA726; /* 温暖的橙色 */
}
.moon-icon {
color: #4FC3F7; /* 柔和的蓝色 */
}
[data-theme="dark"] .sun-icon {
color: #FFB74D;
opacity: 0;
transform: rotate(90deg) scale(0);
}
[data-theme="dark"] .moon-icon {
color: #81D4FA;
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);
}
.card::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 20px;
background: linear-gradient(125deg, var(--glow-color) 0%, transparent 60%);
z-index: 1;
opacity: 0;
transition: opacity 0.2s ease;
}
.card:hover::after {
opacity: 1;
}
@keyframes softGlow {
0% {
box-shadow:
8px 8px 16px var(--shadow-dark),
-8px -8px 16px var(--shadow-light),
0 0 2px var(--glow-color);
}
100% {
box-shadow:
8px 8px 16px var(--shadow-dark),
-8px -8px 16px var(--shadow-light),
0 0 10px var(--glow-color);
}
}
.card:hover .avatar {
animation: softGlow 2s ease-in-out infinite alternate;
}
</style>
</head>
<body>
<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="card">
<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 class="email-container">
<a href="mailto:yigehaozi@gmail.com" class="email">yigehaozi@gmail.com</a>
</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';
root.setAttribute('data-theme', storedTheme);
themeToggle.addEventListener('click', () => {
const currentTheme = root.getAttribute('data-theme');
let newTheme = 'light';
// 主题切换逻辑修改为
switch(currentTheme) {
case 'light':
newTheme = 'dark';
break;
case 'dark':
newTheme = 'light';
break;
case 'auto':
newTheme = 'light';
break;
}
requestAnimationFrame(() => {
root.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);
});
});
prefersDarkScheme.addEventListener('change', (e) => {
if (root.getAttribute('data-theme') === 'auto') {
requestAnimationFrame(() => {
root.setAttribute('data-theme', e.matches ? 'dark' : 'light');
});
}
});
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initTheme);
} else {
initTheme();
}
</script>
</body>
</html>
这家伙太懒了，什么也没留下。
