246 lines
6.9 KiB
HTML
246 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Mayx | Personal Homepage</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
body {
|
|
background: linear-gradient(135deg, #1a2a6c, #2a3a7c, #3a4a8c);
|
|
color: #fff;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
overflow-x: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
/* 背景装饰元素 */
|
|
.bubble {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
animation: float 15s infinite ease-in-out;
|
|
z-index: -1;
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
25% { transform: translate(40px, -60px) scale(1.1); }
|
|
50% { transform: translate(-60px, 40px) scale(0.9); }
|
|
75% { transform: translate(60px, 40px) scale(1.05); }
|
|
}
|
|
|
|
.container {
|
|
max-width: 800px;
|
|
width: 90%;
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.avatar {
|
|
width: 150px;
|
|
height: 150px;
|
|
border-radius: 50%;
|
|
margin: 0 auto 20px;
|
|
background: linear-gradient(45deg, #ff9966, #ff5e62);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 60px;
|
|
color: white;
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
|
|
border: 4px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
h1 {
|
|
font-size: 3.5rem;
|
|
margin-bottom: 20px;
|
|
text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.typing-text {
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
animation: typing 3s steps(20, end) forwards, blink 0.75s step-end infinite;
|
|
border-right: 3px solid #ff5e62;
|
|
max-width: 100%;
|
|
}
|
|
|
|
@keyframes typing {
|
|
from { width: 0 }
|
|
to { width: 100% }
|
|
}
|
|
|
|
@keyframes blink {
|
|
from, to { border-color: transparent }
|
|
50% { border-color: #ff5e62 }
|
|
}
|
|
|
|
.tagline {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 40px;
|
|
color: rgba(255, 255, 255, 0.85);
|
|
font-weight: 300;
|
|
}
|
|
|
|
.blog-button {
|
|
display: inline-block;
|
|
padding: 16px 40px;
|
|
background: linear-gradient(45deg, #ff9966, #ff5e62);
|
|
color: white;
|
|
text-decoration: none;
|
|
font-size: 1.3rem;
|
|
font-weight: 600;
|
|
border-radius: 50px;
|
|
margin: 20px 0;
|
|
transition: all 0.4s ease;
|
|
box-shadow: 0 6px 20px rgba(255, 94, 98, 0.4);
|
|
border: 2px solid rgba(255, 255, 255, 0.2);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.blog-button:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 25px rgba(255, 94, 98, 0.6);
|
|
}
|
|
|
|
.blog-button:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.blog-button::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
|
transition: 0.5s;
|
|
}
|
|
|
|
.blog-button:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.social-icons {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 40px;
|
|
gap: 20px;
|
|
}
|
|
|
|
.social-icons a {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: white;
|
|
font-size: 1.5rem;
|
|
transition: all 0.3s ease;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.social-icons a:hover {
|
|
transform: translateY(-5px);
|
|
background: linear-gradient(45deg, #ff9966, #ff5e62);
|
|
}
|
|
|
|
.footer {
|
|
margin-top: 50px;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 768px) {
|
|
h1 {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.tagline {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.avatar {
|
|
width: 120px;
|
|
height: 120px;
|
|
font-size: 50px;
|
|
}
|
|
|
|
.blog-button {
|
|
padding: 14px 35px;
|
|
font-size: 1.1rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
h1 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.tagline {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 背景装饰气泡 -->
|
|
|
|
<div class="container">
|
|
<div class="avatar">
|
|
👤
|
|
</div>
|
|
<h1><span class="typing-text">Hi, I'm Mayx</span></h1>
|
|
<p class="tagline">Developer & Content Creator</p>
|
|
<a href="https://mabbs.github.io" target="_blank" class="blog-button">
|
|
🔗 Visit My Blog
|
|
</a>
|
|
|
|
<div class="footer">
|
|
<p>© 2025 Mayx. All Rights Reserved.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 创建更多背景气泡
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const body = document.querySelector('body');
|
|
for (let i = 0; i < 15; i++) {
|
|
const bubble = document.createElement('div');
|
|
bubble.classList.add('bubble');
|
|
|
|
// 随机大小和位置
|
|
const size = Math.random() * 80 + 40;
|
|
bubble.style.width = `${size}px`;
|
|
bubble.style.height = `${size}px`;
|
|
bubble.style.top = `${Math.random() * 100}%`;
|
|
bubble.style.left = `${Math.random() * 100}%`;
|
|
|
|
// 随机动画延迟
|
|
bubble.style.animationDelay = `${Math.random() * 10}s`;
|
|
|
|
body.appendChild(bubble);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |