<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>藤原 | 个人主页</title>
<meta name="description" content="一个热衷于分享资源/教程/生活的站长的站点">
<meta name="keywords" content="tengyuanyy,tengyuanyy主页,个人导航页,藤原导航,藤原主页,藤原杂谈">
<link rel="icon" href="./static/img/favicon.ico">
<!-- 字体引入 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
<!-- 使用Font Awesome图标 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-color: #000000;
--secondary-color: #333333;
--dark-color: #000000;
--light-color: #ffffff;
--gray-color: #666666;
--light-gray: #f0f0f0;
--transition: all 0.3s ease;
--border-radius: 8px;
--box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
--box-shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.15);
--comic-border: 3px solid #000;
--comic-bg: #fff;
--comic-accent: #ff4d4d;
}
/* 黑夜模式变量 */
body.dark-mode {
--primary-color: #ffffff;
--secondary-color: #cccccc;
--dark-color: #121212;
--light-color: #1e1e1e;
--gray-color: #999999;
--light-gray: #2a2a2a;
--comic-bg: #1e1e1e;
--comic-border: 3px solid #444;
--comic-accent: #ff6b6b;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Noto Sans SC', sans-serif;
background-color: var(--light-color);
color: var(--primary-color);
line-height: 1.6;
overflow-x: hidden;
min-height: 100vh;
position: relative;
transition: background-color 0.3s ease, color 0.3s ease;
}
/* 漫画风格的页面边框 */
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: var(--comic-border);
pointer-events: none;
z-index: 1000;
}
/* 漫画风格的装饰性斜线 */
body::after {
content: "";
position: fixed;
top: 0;
right: 0;
width: 100px;
height: 100px;
background: linear-gradient(45deg, transparent 45%, var(--comic-accent) 45%, var(--comic-accent) 55%, transparent 55%);
z-index: 999;
}
a {
text-decoration: none;
color: inherit;
transition: var(--transition);
}
img {
max-width: 100%;
height: auto;
display: block;
}
/* 简约漫画卡片效果 */
.comic-card {
background: var(--comic-bg);
border-radius: var(--border-radius);
border: var(--comic-border);
box-shadow: var(--box-shadow);
position: relative;
overflow: hidden;
transition: var(--transition);
}
.comic-card:hover {
transform: translateY(-5px);
box-shadow: var(--box-shadow-hover);
}
/* 漫画对话框效果 */
.speech-bubble {
position: relative;
background: var(--comic-bg);
border-radius: var(--border-radius);
border: var(--comic-border);
padding: 1.5rem;
margin: 1rem 0;
}
.speech-bubble::after {
content: '';
position: absolute;
bottom: -10px;
left: 20px;
width: 20px;
height: 20px;
background: var(--comic-bg);
border-right: var(--comic-border);
border-bottom: var(--comic-border);
transform: rotate(45deg);
z-index: -1;
}
/* 头部样式 */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: var(--comic-bg);
border-bottom: var(--comic-border);
z-index: 100;
padding: 1rem 2rem;
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
.logo {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: 1px;
position: relative;
}
.logo::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 3px;
background: var(--comic-accent);
}
.nav {
display: flex;
gap: 2rem;
}
.nav-item {
position: relative;
padding: 0.5rem 0;
font-weight: 500;
color: var(--gray-color);
text-transform: uppercase;
letter-spacing: 1px;
}
.nav-item:hover, .nav-item.active {
color: var(--primary-color);
}
.nav-item::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--comic-accent);
transition: var(--transition);
}
.nav-item:hover::after, .nav-item.active::after {
width: 100%;
}
/* 英雄区域 */
.hero {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 8rem 2rem 4rem;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('https://api.yilx.net/img/pc') center/cover no-repeat;
opacity: 0.1;
z-index: -1;
}
.avatar {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
border: 4px solid var(--comic-bg);
box-shadow: var(--box-shadow);
margin-bottom: 2rem;
border: var(--comic-border);
}
.site-title {
font-size: 3rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--dark-color);
position: relative;
display: inline-block;
}
.site-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 4px;
background: var(--comic-accent);
}
.motto {
font-size: 1.2rem;
color: var(--gray-color);
margin-bottom: 2rem;
font-weight: 500;
max-width: 600px;
line-height: 1.8;
}
/* 主要内容区域 */
.main {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 992px) {
.main {
grid-template-columns: 2fr 1fr;
}
}
/* 卡片通用样式 */
.card {
background: var(--comic-bg);
border-radius: var(--border-radius);
border: var(--comic-border);
padding: 1.5rem;
transition: var(--transition);
margin-bottom: 1.5rem;
position: relative;
}
.card-title {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.card-title i {
color: var(--comic-accent);
}
/* 竖向轮播图样式 */
.vertical-carousel {
position: relative;
border-radius: var(--border-radius);
overflow: hidden;
height: 400px;
border: var(--comic-border);
}
.vertical-slides {
height: 100%;
display: flex;
flex-direction: column;
transition: transform 0.5s ease;
}
.vertical-slide {
height: 100%;
width: 100%;
flex-shrink: 0;
}
.vertical-blog-card {
display: block;
height: 100%;
position: relative;
}
.vertical-blog-card img {
width: 100%;
height: 100%;
object-fit: cover;
}
.vertical-text-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
color: white;
padding: 1.5rem;
}
.vertical-text-slide {
display: none;
}
.vertical-text-slide.active {
display: block;
}
.date {
font-size: 0.9rem;
opacity: 0.8;
margin-bottom: 0.5rem;
}
.excerpt {
font-size: 0.95rem;
margin-bottom: 0.5rem;
}
.title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1rem;
}
.button {
display: inline-block;
padding: 0.5rem 1.5rem;
background-color: var(--comic-accent);
color: white;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 500;
transition: var(--transition);
border: var(--comic-border);
}
.button:hover {
background-color: var(--dark-color);
transform: translateY(-2px);
}
.vertical-dots {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 0.5rem;
z-index: 10;
}
.vertical-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
border: 2px solid #000;
cursor: pointer;
transition: var(--transition);
}
.vertical-dot.active {
background-color: var(--comic-accent);
transform: scale(1.2);
}
/* 音乐播放器 */
.music-player-container {
background: var(--comic-bg);
border-radius: var(--border-radius);
border: var(--comic-border);
padding: 1rem;
transition: var(--transition);
position: relative;
width: 100%; /* 确保宽度一致 */
}
.music-player {
display: flex;
align-items: center;
gap: 1rem;
}
.cover {
width: 80px;
height: 80px;
border-radius: var(--border-radius);
overflow: hidden;
flex-shrink: 0;
border: var(--comic-border);
}
.cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.music-info {
flex-grow: 1;
text-align: left;
}
.music-title {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 0.25rem;
}
.music-artist {
font-size: 0.9rem;
color: var(--gray-color);
margin-bottom: 0.75rem;
}
.progress-container {
width: 100%;
height: 4px;
background-color: var(--light-gray);
border-radius: 2px;
margin-bottom: 0.75rem;
cursor: pointer;
}
.progress {
height: 100%;
background: var(--comic-accent);
border-radius: 2px;
width: 0%;
transition: width 0.1s linear;
}
.time-info {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
color: var(--gray-color);
}
.controls {
display: flex;
align-items: center;
gap: 0.5rem;
}
.play-pause-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--comic-accent);
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
}
.play-pause-btn:hover {
transform: scale(1.1);
}
.control-btn {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: var(--light-gray);
color: var(--dark-color);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
}
.control-btn:hover {
background-color: var(--comic-accent);
color: white;
}
.pause-icon {
display: none;
}
.playing .play-icon {
display: none;
}
.playing .pause-icon {
display: block;
}
/* 个人空间卡片 */
.space-card {
background: var(--comic-bg);
border-radius: var(--border-radius);
border: var(--comic-border);
transition: var(--transition);
display: flex;
align-items: stretch;
height: 100%;
position: relative;
overflow: hidden;
width: 100%; /* 确保宽度一致 */
}
.space-card:hover {
transform: translateY(-5px);
}
.space-content {
flex: 1;
padding: 1.5rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.space-title {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.space-desc {
font-size: 0.9rem;
color: var(--gray-color);
margin-bottom: 1rem;
}
.space-button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1.25rem;
background: var(--comic-accent);
color: white;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 500;
transition: var(--transition);
width: fit-content;
border: var(--comic-border);
}
.space-button:hover {
background: var(--dark-color);
transform: translateY(-2px);
}
.space-image {
width: 40%;
position: relative;
overflow: hidden;
}
.space-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.space-card:hover .space-image img {
transform: scale(1.05);
}
/* API列表 */
.api-list {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem 4rem;
}
.api-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(48%, 1fr));
gap: 1.5rem;
}
.api-card {
position: relative;
border-radius: var(--border-radius);
overflow: hidden;
height: 180px;
transition: var(--transition);
border: var(--comic-border);
width: 100%; /* 确保宽度一致 */
}
.api-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.api-card:hover {
transform: translateY(-5px);
}
.api-card:hover img {
transform: scale(1.05);
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
color: white;
padding: 1.5rem;
}
.overlay h3 {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.overlay p {
font-size: 0.9rem;
opacity: 0.9;
margin-bottom: 0.5rem;
}
/* 页脚 */
.footer {
background-color: var(--dark-color);
color: white;
padding: 3rem 2rem;
text-align: center;
border-top: var(--comic-border);
}
.footer-container {
max-width: 1200px;
margin: 0 auto;
}
.footer-text {
font-size: 1rem;
margin-bottom: 1rem;
opacity: 0.8;
}
.icp {
font-size: 0.9rem;
opacity: 0.6;
}
.icp a {
color: white;
margin-left: 0.5rem;
transition: var(--transition);
}
.icp a:hover {
opacity: 1;
text-decoration: underline;
}
/* 浮动按钮 */
.float-button {
position: fixed;
right: 2rem;
bottom: 2rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
z-index: 999;
}
.upward {
width: 48px;
height: 48px;
border-radius: 50%;
background-color: var(--comic-accent);
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
border: var(--comic-border);
}
.upward:hover {
background-color: var(--dark-color);
transform: translateY(-3px);
}
/* 右侧边栏 */
.right {
position: relative;
}
.right .card {
background: var(--comic-bg);
border-radius: var(--border-radius);
border: var(--comic-border);
transition: var(--transition);
overflow: hidden;
position: relative;
}
.right .card:hover {
transform: translateY(-5px);
}
.right .card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--comic-accent);
}
.right .card-title {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 1.25rem;
}
.right .content {
font-size: 0.95rem;
color: var(--dark-color);
line-height: 1.7;
}
.right .content div {
margin-bottom: 0.75rem;
padding-bottom: 0.75rem;
border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
}
.right .content div:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.right .content strong {
color: var(--comic-accent);
}
.right .content a {
color: var(--comic-accent);
text-decoration: none;
transition: var(--transition);
font-weight: 500;
}
.right .content a:hover {
color: var(--dark-color);
text-decoration: underline;
}
/* 个人资料卡片 */
.profile-card {
text-align: center;
padding: 2.5rem 1.5rem 1.5rem;
position: relative;
background: var(--comic-bg);
border-radius: var(--border-radius);
border: var(--comic-border);
transition: var(--transition);
overflow: hidden;
margin-bottom: 1.5rem;
}
.profile-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--comic-accent);
}
.profile-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
border: 3px solid white;
object-fit: cover;
margin: -30px auto 1rem;
position: relative;
background-color: #f5f5f5;
z-index: 2;
border: var(--comic-border);
}
.profile-name {
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.profile-bio {
font-size: 0.9rem;
color: var(--gray-color);
margin-bottom: 1.5rem;
}
.profile-stats {
display: flex;
justify-content: space-around;
margin-bottom: 1.5rem;
padding: 0.75rem 0;
background: rgba(0, 0, 0, 0.05);
border-radius: var(--border-radius);
}
.stat-item {
text-align: center;
padding: 0 0.5rem;
}
.stat-number {
font-size: 1.1rem;
font-weight: 600;
color: var(--comic-accent);
}
.stat-label {
font-size: 0.75rem;
color: var(--gray-color);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.goto {
display: block;
width: 100%;
padding: 0.75rem;
background: var(--comic-accent);
color: white;
text-align: center;
border-radius: 50px;
font-weight: 500;
margin-bottom: 1.5rem;
transition: var(--transition);
font-size: 0.9rem;
border: var(--comic-border);
}
.goto:hover {
background: var(--dark-color);
transform: translateY(-2px);
}
.contact-me {
display: flex;
justify-content: center;
gap: 1rem;
}
.image-box {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
border: var(--comic-border);
}
.image-box:hover {
background-color: var(--comic-accent);
color: white;
transform: translateY(-2px);
}
/* 赞赏码样式 */
.donate-box {
text-align: center;
padding: 1rem 0;
}
.donate-title {
font-size: 1rem;
color: var(--dark-color);
margin-bottom: 1rem;
font-weight: 500;
}
.donate-image {
width: 180px;
height: 180px;
margin: 0 auto;
border-radius: var(--border-radius);
overflow: hidden;
border: var(--comic-border);
}
.donate-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.donate-desc {
font-size: 0.8rem;
color: var(--gray-color);
margin-top: 0.5rem;
}
/* 响应式调整 */
@media (max-width: 768px) {
.header {
padding: 1rem;
}
.nav {
display: none;
}
.hero {
padding: 5rem 1rem 3rem;
}
.site-title {
font-size: 2rem;
}
.main {
padding: 1rem;
grid-template-columns: 1fr;
}
.api-cards {
grid-template-columns: 1fr;
}
.space-card {
flex-direction: column;
height: auto;
}
.space-image {
width: 100%;
height: 150px;
}
.music-player {
flex-direction: column;
text-align: center;
}
.music-info {
text-align: center;
}
.controls {
justify-content: center;
}
.float-button {
right: 1rem;
bottom: 1rem;
}
.profile-avatar {
width: 80px;
height: 80px;
margin: -30px auto 1rem;
}
.donate-image {
width: 150px;
height: 150px;
}
}
/* 媒体行布局 */
.media-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
@media (max-width: 768px) {
.media-row {
grid-template-columns: 1fr;
}
}
/* 漫画风格的装饰元素 */
.comic-dot {
position: absolute;
width: 10px;
height: 10px;
background: var(--comic-accent);
border-radius: 50%;
border: 2px solid #000;
}
/* 加载动画 */
@keyframes comicPulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.loading {
animation: comicPulse 1.5s infinite;
text-align: center;
padding: 2rem;
}
/* 主题切换按钮 */
.theme-toggle {
position: fixed;
right: 2rem;
top: 1.5rem;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--comic-accent);
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 1001;
border: var(--comic-border);
transition: var(--transition);
}
.theme-toggle:hover {
transform: scale(1.1);
}
.theme-toggle i {
font-size: 1.2rem;
}
/* 基础重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
}
/* 修改加载动画样式 */
.tengyuan-loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.98);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9999;
opacity: 1;
transition: opacity 0.5s ease-out;
pointer-events: none;
}
.tengyuan-loading.hidden {
opacity: 0;
}
/* 确保主内容在加载时不可见 */
body.loading {
overflow: hidden;
height: 100vh;
}
body.loading .header,
body.loading .hero,
body.loading .main,
body.loading .footer {
visibility: hidden;
}
body.loaded {
overflow: auto;
}
body.loaded .header,
body.loaded .hero,
body.loaded .main,
body.loaded .footer {
visibility: visible;
}
@keyframes fadeIn {
to { opacity: 1; }
}
/* 头像容器 */
.tengyuan-avatar-container {
position: relative;
width: 120px;
height: 120px;
margin-bottom: 30px;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
/* 头像 */
.tengyuan-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
border: 2px solid rgba(255, 255, 255, 0.9);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
/* 进度环 */
.tengyuan-progress-ring {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
}
.tengyuan-progress-circle {
fill: transparent;
stroke: #6B7280;
stroke-width: 3;
stroke-dasharray: 326.725;
stroke-dashoffset: 326.725;
stroke-linecap: round;
transform-origin: 50% 50%;
transform: rotate(-90deg);
animation: progress-rotate 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes progress-rotate {
0% {
stroke-dashoffset: 326.725;
transform: rotate(-90deg);
}
50% {
stroke-dashoffset: 0;
transform: rotate(270deg);
}
100% {
stroke-dashoffset: -326.725;
transform: rotate(630deg);
}
}
/* 季节文字 */
.tengyuan-quote {
font-family: 'Inter', 'Noto Sans SC', sans-serif;
font-size: 1.1rem;
color: #475569;
text-align: center;
margin-top: 24px;
line-height: 1.6;
opacity: 0;
animation: textAppear 1.2s ease-out 0.5s forwards;
position: relative;
max-width: 80%;
}
/* 季节飘落元素 */
.season-element {
position: absolute;
z-index: 1;
opacity: 0;
animation: falling linear infinite;
pointer-events: none;
will-change: transform;
}
@keyframes falling {
0% {
transform: translate(var(--start-x), -10vh) rotate(0deg);
opacity: 0;
}
10% {
opacity: var(--element-opacity);
}
90% {
opacity: var(--element-opacity);
}
100% {
transform: translate(calc(var(--start-x) + var(--random-x)), 110vh) rotate(360deg);
opacity: 0;
}
}
/* 季节指示器 - 修改为左下方位置 */
.season-indicator {
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
background: #F8FAFC;
padding: 4px 12px;
border-radius: 16px;
font-size: 0.85rem;
color: #64748B;
font-weight: 500;
z-index: 4;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
white-space: nowrap;
min-width: 36px;
text-align: center;
}
/* 响应式设计 */
@media (max-width: 768px) {
.tengyuan-avatar-container {
width: 100px;
height: 100px;
}
.tengyuan-avatar {
width: 80px;
height: 80px;
}
.tengyuan-quote {
font-size: 1rem;
}
.season-indicator {
font-size: 0.75rem;
padding: 3px 10px;
bottom: -10px;
}
}
/* FPS显示 */
#fpsDisplay {
position: fixed;
left: 10px;
bottom: 10px;
background: rgba(0, 0, 0, 0.7);
padding: 8px 15px;
border-radius: 5px;
font-family: 'Noto Sans SC', sans-serif;
font-size: 14px;
color: white;
user-select: none;
transition: color 0.3s;
z-index: 999;
}
/* 响应式调整 */
@media (max-width: 768px) {
.header {
padding: 1rem;
}
.bar {
display: none;
}
.main_center {
padding: 5rem 1rem 3rem;
}
.site-title {
font-size: 2rem;
}
.main {
padding: 1rem;
grid-template-columns: 1fr;
}
.api-cards {
grid-template-columns: 1fr;
}
.float_button {
right: 1rem;
bottom: 1rem;
}
}
/* 简约图标样式 */
.icon {
width: 24px;
height: 24px;
fill: currentColor;
}
</style>
</head>
<body class="loading">
<!-- 加载动画 -->
<div class="tengyuan-loading">
<div id="season-elements-container"></div>
<div class="tengyuan-avatar-container">
<img class="tengyuan-avatar" src="https://a.520gexing.com/uploads/allimg/2019032616/3mltnpfys55.jpg" alt="头像">
<div class="season-indicator" id="seasonIndicator"></div>
<svg class="tengyuan-progress-ring" viewBox="0 0 120 120">
<circle class="tengyuan-progress-circle" cx="60" cy="60" r="52.5"></circle>
</svg>
</div>
<div class="tengyuan-quote">
风穿过四季的门，
<br>每一片飘落都是时间的信。
</div>
</div>
<!-- 头部导航 -->
<header class="header comic-card">
<div class="header-container">
<div class="logo">藤原の小站</div>
<nav class="nav">
<a href="#" class="nav-item active">首页</a>
<a href="#" class="nav-item">博客</a>
<a href="#" class="nav-item">项目</a>
<a href="#" class="nav-item">关于</a>
</nav>
</div>
</header>
<!-- 主题切换按钮 -->
<div class="theme-toggle" id="themeToggle">
<i class="fas fa-moon"></i>
</div>
<!-- 英雄区域 -->
<section class="hero">
<img class="avatar" src="https://a.520gexing.com/uploads/allimg/2019032616/3mltnpfys55.jpg" alt="藤原的头像">
<h1 class="site-title">藤原の小站</h1>
<p class="motto">风带来故事的种子，时间使之发芽。</p>
<div class="speech-bubble">
欢迎来到我的个人空间，这里记录着我的学习、生活和创作的点滴。
</div>
</section>
<!-- 主要内容 -->
<div class="main">
<div class="left">
<!-- 竖向轮播图卡片 -->
<div class="card comic-card">
<div class="vertical-carousel">
<div class="vertical-slides">
<div class="vertical-slide">
<a href="https://blog.tengyuan.icu" class="vertical-blog-card" target="_blank">
<img class="lazy" data-original="https://yilx.net/static/img/lxbg.jpeg" alt="MC开服教程" src="https://api.yilx.net/image/lunbotu/6.jpg">
<div class="vertical-text-content">
<div class="vertical-text-slide active">
<p class="date">2025-04-21</p>
<h2 class="title">标题1</h2>
<p class="excerpt">描述</p>
</div>
</div>
</a>
</div>
<div class="vertical-slide">
<a href="https://blog.tengyuan.icu" class="vertical-blog-card" target="_blank">
<img class="lazy" data-original="https://yilx.net/static/img/lxbg.jpeg" alt="使用/give获取特殊nbt物品" src="https://yilx.net/static/img/lxbg.jpeg">
<div class="vertical-text-content">
<div class="vertical-text-slide">
<p class="date">2025-4-18</p>
<h2 class="title">标题2</h2>
<p class="excerpt">描述</p>
</div>
</div>
</a>
</div>
<div class="vertical-slide">
<a href="https://blog.tengyuan.icu" class="vertical-blog-card" target="_blank">
<img class="lazy" data-original="https://yilx.net/static/img/lxbg.jpeg" alt="标题3" src="http://localhost/static/img/tx.jpg">
<div class="vertical-text-content">
<div class="vertical-text-slide">
<p class="date">2025-5-1</p>
<h2 class="title">标题3</h2>
<p class="excerpt">描述</p>
</div>
</div>
</a>
</div>
</div>
<div class="vertical-slide">
<a href="https://blog.tengyuan.icu" class="vertical-blog-card" target="_blank">
<img class="lazy" data-original="https://yilx.net/static/img/lxbg.jpeg" alt="标题3" src="http://localhost/static/img/tx.jpg">
<div class="vertical-text-content">
<div class="vertical-text-slide">
<p class="date">2025-5-1</p>
<h2 class="title">标题3</h2>
<p class="excerpt">描述</p>
</div>
</div>
</a>
</div>
<div class="vertical-dots">
<button class="vertical-dot active"></button>
<button class="vertical-dot"></button>
<button class="vertical-dot"></button>
<button class="vertical-dot"></button>
</div>
</div>
</div>
<!-- 音乐播放器和个人空间并排 -->
<div class="media-row">
<!-- 音乐播放器 -->
<div class="music-player-container comic-card">
<audio id="myAudio" src="https://api.yilx.net/music/Hyper-energetic-ACG"></audio>
<div class="music-player">
<div class="cover">
<img class="lazy" data-original="https://api.yilx.net/img/pm" alt="专辑封面" src="https://api.yilx.net/img/pm">
</div>
<div class="music-info">
<h3 class="music-title">随机音乐</h3>
<p class="music-artist">藤原的音乐推荐</p>
<div class="progress-container">
<div class="progress" id="progress"></div>
</div>
<div class="time-info">
<span id="current-time">0:00</span>
<span id="duration">0:00</span>
</div>
<div class="controls">
<button class="control-btn" id="prev-btn">
<i class="fas fa-step-backward"></i>
</button>
<button class="play-pause-btn" id="play-btn">
<span class="play-icon">
<i class="fas fa-play"></i>
</span>
<span class="pause-icon">
<i class="fas fa-pause"></i>
</span>
</button>
<button class="control-btn" id="next-btn">
<i class="fas fa-step-forward"></i>
</button>
</div>
</div>
</div>
</div>
<!-- 个人空间卡片 -->
<a href="https://b23.tv/pDBTVlx" class="space-card comic-card" target="_blank">
<div class="space-content">
<h3 class="space-title">个人空间</h3>
<p class="space-desc">藤原的个人空间</p>
<span class="space-button">
前往空间
<i class="fas fa-arrow-right"></i>
</span>
</div>
<div class="space-image">
<img src="https://a.520gexing.com/uploads/allimg/2019032616/3mltnpfys55.jpg" alt="藤原的个人空间">
</div>
</a>
</div>
<!-- API列表 -->
<div class="api-list">
<div class="api-cards">
<a class="api-card comic-card" target="_blank" href="http://blog.tengyuan.icu">
<img class="lazy" data-original="https://api.yilx.net/img/pc" alt="" src="http://api.yilx.net/upload/1742118988976.jpg">
<div class="overlay">
<h3>博客</h3>
<p>记录摆烂日常</p>
<p>site</p>
</div>
</a>
<a class="api-card comic-card" target="_blank" href="https://api.yilx.net">
<img class="lazy" data-original="https://api.yilx.net/img/pc" alt="" src="https://api.yilx.net/img/pc">
<div class="overlay">
<h3>API站</h3>
<p>api站点/图床/统计</p>
<p>site</p>
</div>
</a>
<a class="api-card comic-card" target="_blank" href="http://wp.tengyuan.icu">
<img class="lazy" data-original="https://camo.githubusercontent.com/01f699b5dd28e3fd101d0381f0c7471ed5a08210713d7663f0ad493d966be453/68747470733a2f2f666173746c792e6a7364656c6976722e6e65742f67682f7661737473612f46696c65436f6465426f784056312e362f7374617469632f62616e6e6572732f696d675f312e706e67" alt="" src="http://api.yilx.net/upload/1742130278110.jpg">
<div class="overlay">
<h3>网盘</h3>
<p>开箱即用的文件快传系统</p>
<p>site</p>
</div>
</a>
<a class="api-card comic-card" target="_blank" href="http://game.tengyuan.icu">
<img class="lazy" data-original="http://static.1heron.com/douyou8/ad/174409477289445.jpg" alt="" src="http://api.yilx.net/upload/1743067883203.jpg">
<div class="overlay">
<h3>TENGYUANの游戏小站</h3>
<p>游戏盛宴，一键解锁</p>
<p>project</p>
</div>
</a>
<a class="api-card comic-card" target="_blank" href="http://tengyuan.icu">
<img class="lazy" data-original="https://api.yilx.net/img/pc" alt="" src="https://api.yilx.net/upload/1741001197606.jpg">
<div class="overlay">
<h3>TENGYUAN</h3>
<p>TENGYUAN</p>
<p>project</p>
</div>
</a>
<a class="api-card comic-card" target="_blank" href="https://tengyuan.icu">
<img class="lazy" data-original="https://api.yilx.net/img/pc" alt="" src="http://api.yilx.net/upload/1741769788550.jpg">
<div class="overlay">
<h3>TENGYUAN1</h3>
<p>TENGYUAN1</p>
<p>project</p>
</div>
</a>
</div>
</div>
</div>
<!-- 右侧侧边栏 -->
<div class="right">
<!-- 个人资料卡片 -->
<div class="profile-card comic-card">
<img class="profile-avatar" src="https://a.520gexing.com/uploads/allimg/2019032616/3mltnpfys55.jpg" alt="藤原的头像">
<h2 class="profile-name">藤原</h2>
<p class="profile-bio">风带来故事的种子，时间使之发芽。</p>
<div class="profile-stats">
<div class="stat-item">
<div class="stat-number">4</div>
<div class="stat-label">网站</div>
</div>
<div class="stat-item">
<div class="stat-number">2</div>
<div class="stat-label">项目</div>
</div>
<div class="stat-item">
<div class="stat-number">2</div>
<div class="stat-label">分类</div>
</div>
</div>
<a href="https://blog.tengyuan.icu/" class="goto">前往博客</a>
<div class="contact-me">
<a class="image-box" href="https://github.com/tengyuan1101" target="_blank">
<i class="fab fa-github"></i>
</a>
<a class="image-box" href="https://www.zhihu.com/people/c829052124f7ba5840ed206f13691a6b" target="_blank">
<i class="fab fa-zhihu"></i>
</a>
<a class="image-box" href="mailto:2083737075@qq.com" target="_blank">
<i class="fas fa-envelope"></i>
</a>
</div>
</div>
<!-- 公告栏 -->
<div class="card comic-card">
<div class="card-title">
<i class="fas fa-bullhorn"></i> 公告栏
</div>
<div class="content">
<center>
<b>--- 主域名 ---
<br>
<a target="_blank" rel="noopener" href="https://tengyuan.icu" title="此线路部署于腾讯云服务器" class="anno_content">
<font color="#000000">tengyuan.icu</font>
</a> | <a target="_blank" rel="noopener" href="https://tengyuan.tech" title="此线路部署于雨云服务器" class="anno_content">
<font color="#000000">tengyuan.tech</font>
</a>
<br>--- 备用域名 ---
<br>
<a target="_blank" rel="noopener" href="暂无" title="暂无" class="anno_content">
<font color="#000000">暂无</font>
</a>
<br>
<a target="_blank" rel="noopener" href="暂无" title="暂无" class="anno_content">
<font color="#000000">暂无</font>
</a>
<br>--- 网站安卓APP ---
<br>🍧<a target="_blank" rel="noopener" href="暂无下载链接" title="点这里可以下载网站的安卓APP" class="anno_content">
<font color="#000000">点此下载</font>
</a>🍧
</b>
</center>
</div>
</div>
<!-- 赞赏码板块 -->
<div class="card comic-card">
<div class="card-title">
<i class="fas fa-heart"></i> 支持我们
</div>
<div class="donate-box">
<div class="donate-title">感谢您的支持</div>
<div class="donate-image">
<img src="https://bicool-user-assets--small-file.oss-rg-china-mainland.aliyuncs.com/b3ae0df4a91e6b70286a23e34cf7f61b.jpg" alt="赞赏码">
</div>
<div class="donate-desc">扫描二维码支持我们</div>
</div>
</div>
<div class="card comic-card">
<div class="card-title">
<i class="fas fa-info-circle"></i> 本站信息
</div>
<div class="content">
<div>本站总访客量：3253次</div>
<div>今日访客量：221次</div>
<div>项目/网站总数：6</div>
<div>已经有<strong>22</strong>位小伙伴入驻本站啦！</div>
</div>
</div>
</div>
</div>
<!-- 页脚 -->
<footer class="footer">
<div class="footer-container">
<p class="footer-text">© 2025 藤原の小站 - 保留所有权利</p>
<p class="icp">
ICP备案号:
<a href="https://beian.miit.gov.cn/" target="_blank">待备案</a>
</p>
</div>
</footer>
<!-- 浮动按钮 -->
<div class="float-button">
<div class="upward" style="display: none;">
<i class="fas fa-arrow-up"></i>
</div>
</div>
<!-- FPS显示 -->
<div id="fpsDisplay" class="status-excellent">FPS: 55 十分流畅😊</div>
<script>
// 音乐播放器控制
const audio = document.getElementById('myAudio');
const playPauseBtn = document.getElementById('play-btn');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progress = document.getElementById('progress');
const currentTimeEl = document.getElementById('current-time');
const durationEl = document.getElementById('duration');
// 更新进度条
audio.addEventListener('timeupdate', () => {
const { currentTime, duration } = audio;
const progressPercent = (currentTime / duration) * 100;
progress.style.width = `${progressPercent}%`;
// 格式化时间显示
const formatTime = (time) => {
const minutes = Math.floor(time / 60);
const seconds = Math.floor(time % 60);
return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
};
currentTimeEl.textContent = formatTime(currentTime);
if (duration) {
durationEl.textContent = formatTime(duration);
}
});
// 点击进度条跳转
const progressContainer = document.querySelector('.progress-container');
progressContainer.addEventListener('click', (e) => {
const width = progressContainer.clientWidth;
const clickX = e.offsetX;
const duration = audio.duration;
audio.currentTime = (clickX / width) * duration;
});
playPauseBtn.addEventListener('click', () => {
if (audio.paused) {
audio.play();
playPauseBtn.classList.add('playing');
} else {
audio.pause();
playPauseBtn.classList.remove('playing');
}
});
// 上一首/下一首按钮
prevBtn.addEventListener('click', () => {
// 这里可以添加切换歌曲的逻辑
alert('切换到上一首歌曲');
});
nextBtn.addEventListener('click', () => {
// 这里可以添加切换歌曲的逻辑
alert('切换到下一首歌曲');
});
// 歌曲结束时自动播放下一首
audio.addEventListener('ended', () => {
// 这里可以添加自动播放下一首的逻辑
alert('歌曲播放结束，可以在这里添加自动播放下一首的逻辑');
});
// 返回顶部按钮
const upwardBtn = document.querySelector('.upward');
upwardBtn.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
window.addEventListener('scroll', () => {
if (window.scrollY > 300) {
upwardBtn.style.display = 'flex';
} else {
upwardBtn.style.display = 'none';
}
});
// 图片懒加载
document.addEventListener('DOMContentLoaded', function() {
const lazyImages = [].slice.call(document.querySelectorAll('img.lazy'));
if ('IntersectionObserver' in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.original;
lazyImage.classList.remove('lazy');
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
// 不支持IntersectionObserver的备用方案
lazyImages.forEach(function(lazyImage) {
lazyImage.src = lazyImage.dataset.original;
lazyImage.classList.remove('lazy');
});
}
});
// 竖向轮播图控制
let currentVerticalSlide = 0;
const verticalSlides = document.querySelectorAll('.vertical-slide');
const verticalTextSlides = document.querySelectorAll('.vertical-text-slide');
const verticalDots = document.querySelectorAll('.vertical-dot');
const verticalSlidesContainer = document.querySelector('.vertical-slides');
function showVerticalSlide(n) {
currentVerticalSlide = (n + verticalSlides.length) % verticalSlides.length;
// 更新轮播图位置
verticalSlidesContainer.style.transform = `translateY(-${currentVerticalSlide * 100}%)`;
// 更新文本和指示点状态
verticalTextSlides.forEach((slide, index) => {
if(index === currentVerticalSlide) {
slide.classList.add('active');
} else {
slide.classList.remove('active');
}
});
verticalDots.forEach((dot, index) => {
if(index === currentVerticalSlide) {
dot.classList.add('active');
} else {
dot.classList.remove('active');
}
});
}
verticalDots.forEach((dot, index) => {
dot.addEventListener('click', () => {
showVerticalSlide(index);
});
});
// 自动轮播
let slideInterval = setInterval(() => {
showVerticalSlide(currentVerticalSlide + 1);
}, 5000);
// 鼠标悬停时暂停轮播
const verticalCarousel = document.querySelector('.vertical-carousel');
verticalCarousel.addEventListener('mouseenter', () => {
clearInterval(slideInterval);
});
verticalCarousel.addEventListener('mouseleave', () => {
slideInterval = setInterval(() => {
showVerticalSlide(currentVerticalSlide + 1);
}, 5000);
});
showVerticalSlide(0);
// 添加一些随机的漫画风格装饰点
function addComicDots() {
const colors = ['#ff4d4d', '#4dff4d', '#4d4dff', '#ffff4d'];
for (let i = 0; i < 10; i++) {
const dot = document.createElement('div');
dot.className = 'comic-dot';
dot.style.background = colors[Math.floor(Math.random() * colors.length)];
dot.style.left = `${Math.random() * 100}%`;
dot.style.top = `${Math.random() * 100}%`;
dot.style.width = `${5 + Math.random() * 10}px`;
dot.style.height = dot.style.width;
document.body.appendChild(dot);
}
}
// 页面加载完成后添加装饰点
window.addEventListener('load', addComicDots);
// 主题切换功能
const themeToggle = document.getElementById('themeToggle');
const body = document.body;
// 检查本地存储中的主题设置
const currentTheme = localStorage.getItem('theme') || 'light';
if (currentTheme === 'dark') {
body.classList.add('dark-mode');
themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
}
// 切换主题
themeToggle.addEventListener('click', () => {
body.classList.toggle('dark-mode');
if (body.classList.contains('dark-mode')) {
localStorage.setItem('theme', 'dark');
themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
} else {
localStorage.setItem('theme', 'light');
themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
}
});
// 修改加载逻辑
document.addEventListener('DOMContentLoaded', function() {
// 创建季节元素
createSeasonElements();
// 预加载重要图片
const preloadImages = [
'https://a.520gexing.com/uploads/allimg/2019032616/3mltnpfys55.jpg',
'https://api.yilx.net/image/lunbotu/6.jpg',
'https://api.yilx.net/img/pm'
];
let loadedImages = 0;
function imageLoaded() {
loadedImages++;
if (loadedImages === preloadImages.length) {
completeLoading();
}
}
preloadImages.forEach(src => {
const img = new Image();
img.src = src;
img.onload = imageLoaded;
img.onerror = imageLoaded; // 即使出错也继续
});
// 设置超时保证无论如何都会完成加载
setTimeout(completeLoading, 3000);
});
function completeLoading() {
// 移除loading类，显示内容
document.body.classList.remove('loading');
document.body.classList.add('loaded');
// 淡出加载动画
const loadingElement = document.querySelector('.tengyuan-loading');
loadingElement.classList.add('hidden');
// 动画结束后移除元素
loadingElement.addEventListener('transitionend', function() {
loadingElement.remove();
});
}
// 季节SVG元素定义
const seasonSVGs = {
spring: [
// 粉色樱花
`<svg viewBox="0 0 100 100" width="30" height="30">
<path d="M50 20 Q60 0 70 20 T90 30 Q100 40 80 50 T70 70 Q60 90 50 70 T30 50 Q10 40 20 30 T30 20 Q40 0 50 20"
fill="#FF9FF3"/>
</svg>`,
// 黄色小花
`<svg viewBox="0 0 100 100" width="30" height="30">
<circle cx="50" cy="50" r="20" fill="#FECA57"/>
<circle cx="50" cy="30" r="8" fill="#FF9F43"/>
<circle cx="65" cy="40" r="8" fill="#FF9F43"/>
<circle cx="70" cy="60" r="8" fill="#FF9F43"/>
<circle cx="60" cy="75" r="8" fill="#FF9F43"/>
<circle cx="40" cy="75" r="8" fill="#FF9F43"/>
<circle cx="30" cy="60" r="8" fill="#FF9F43"/>
<circle cx="35" cy="40" r="8" fill="#FF9F43"/>
</svg>`
],
summer: [
// 绿色树叶1
`<svg viewBox="0 0 100 100" width="35" height="35">
<path d="M50 10 Q80 30 50 70 Q20 30 50 10"
fill="#1DD1A1" stroke="#10AC84" stroke-width="2"/>
</svg>`,
// 绿色树叶2
`<svg viewBox="0 0 100 100" width="35" height="35">
<path d="M50 10 L70 40 L50 70 L30 40 Z"
fill="#1DD1A1" stroke="#10AC84" stroke-width="2"/>
</svg>`
],
autumn: [
// 红色枫叶1
`<svg viewBox="0 0 100 100" width="32" height="32">
<path d="M50 10 Q70 20 60 40 Q80 30 70 50 Q60 70 50 60 Q40 70 30 50 Q20 30 40 40 Q30 20 50 10"
fill="#FF6B6B" stroke="#EE5253" stroke-width="2"/>
</svg>`,
// 红色枫叶2
`<svg viewBox="0 0 100 100" width="32" height="32">
<path d="M50 10 L60 30 L80 10 L70 40 L90 50 L70 60 L80 90 L60 70 L50 90 L40 70 L20 90 L30 60 L10 50 L30 40 L20 10 L40 30 Z"
fill="#FF6B6B" stroke="#EE5253" stroke-width="2"/>
</svg>`
],
winter: [
// 白色雪花1
`<svg viewBox="0 0 100 100" width="28" height="28">
<path d="M50 10 L60 30 L80 30 L65 45 L75 65 L50 55 L25 65 L35 45 L20 30 L40 30 Z"
fill="#C8D6E5" stroke="#FFFFFF" stroke-width="2"/>
</svg>`,
// 白色雪花2
`<svg viewBox="0 0 100 100" width="28" height="28">
<path d="M50 10 L60 25 L75 15 L65 35 L90 35 L70 50 L90 65 L65 65 L75 85 L60 75 L50 90 L40 75 L25 85 L35 65 L10 65 L30 50 L10 35 L35 35 L25 15 L40 25 Z"
fill="#FFFFFF" stroke="#C8D6E5" stroke-width="1"/>
</svg>`
]
};
function createSeasonElements() {
const container = document.getElementById('season-elements-container');
const now = new Date();
const month = now.getMonth() + 1;
let season, elementCount, elementOpacity;
// 季节判定
if (month >= 3 && month <= 5) { // 春 (3-5月)
season = "spring";
elementCount = 12;
elementOpacity = 0.6;
} else if (month >= 6 && month <= 8) { // 夏 (6-8月)
season = "summer";
elementCount = 10;
elementOpacity = 0.7;
} else if (month >= 9 && month <= 11) { // 秋 (9-11月)
season = "autumn";
elementCount = 15;
elementOpacity = 0.65;
} else { // 冬 (12-2月)
season = "winter";
elementCount = 18;
elementOpacity = 0.75;
}
// 设置季节标识
const seasonNames = {spring: "春", summer: "夏", autumn: "秋", winter: "冬"};
document.getElementById('seasonIndicator').textContent = seasonNames[season];
// 创建飘落元素
for (let i = 0; i < elementCount; i++) {
const element = document.createElement('div');
element.className = 'season-element';
// 随机选择当前季节的SVG
const svgIndex = Math.floor(Math.random() * seasonSVGs[season].length);
element.innerHTML = seasonSVGs[season][svgIndex];
// 设置随机位置和动画参数
const startX = Math.random() * 100;
const randomX = (Math.random() * 30) - 15; // -15px 到 15px 之间的随机偏移
element.style.left = `${startX}vw`;
element.style.setProperty('--start-x', `${(Math.random() * 15) - 7.5}px`);
element.style.setProperty('--random-x', `${randomX}px`);
element.style.setProperty('--element-opacity', elementOpacity);
element.style.animationDuration = `${(Math.random() * 6) + 6}s`; // 6-12秒
element.style.animationDelay = `${Math.random() * 3}s`; // 0-3秒延迟
container.appendChild(element);
}
}
// 页面加载完成后执行
window.addEventListener('load', function() {
createSeasonElements();
// 2秒后移除加载动画
setTimeout(() => {
const loadingElement = document.querySelector('.tengyuan-loading');
loadingElement.style.animation = 'fadeIn 0.4s ease-out reverse forwards';
setTimeout(() => {
loadingElement.remove();
}, 400);
}, 2000);
});
// FPS监控
(function() {
const fpsDisplay = document.getElementById('fpsDisplay');
let lastTime = performance.now();
let frameCount = 0;
let animationFrameId;
function updateFPS() {
const now = performance.now();
frameCount++;
if (now - lastTime >= 3000) {
const fps = Math.round(frameCount * 1000 / (now - lastTime));
// 状态和颜色分类
let status = '', statusClass = '';
if (fps >= 55) {
status = '十分流畅😊';
statusClass = 'status-excellent';
} else if (fps >= 45) {
status = '流畅😀';
statusClass = 'status-good';
} else if (fps >= 30) {
status = '正常😐';
statusClass = 'status-normal';
} else if (fps >= 15) {
status = '卡顿😣';
statusClass = 'status-low';
} else {
status = '崩溃😭';
statusClass = 'status-critical';
}
// 更新显示内容和颜色
fpsDisplay.textContent = `FPS: ${fps} ${status}`;
fpsDisplay.className = statusClass;
frameCount = 0;
lastTime = now;
}
animationFrameId = requestAnimationFrame(updateFPS);
}
updateFPS();
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
cancelAnimationFrame(animationFrameId);
} else {
lastTime = performance.now();
frameCount = 0;
updateFPS();
}
});
})();
</script>
</body>
</html>
</script>
</body>
</html>
index.html
style.css
index.js
assets