xuyue/home
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update
Some checks failed
Deploy / build-and-deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
yuetsh
2025-09-05 12:46:20 +08:00
parent 1fc6f4ef21
commit bc0a71bfcd
2 changed files with 211 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
index.html
View File

@@ -1,10 +1,10 @@
<!DOCTYPE html> <!doctype html>
<html lang="zh-Hans"> <html lang="zh-Hans">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.ico" /> <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>徐越的在线学习平台</title> <title>在线学习平台</title>
</head> </head>
<body> <body>
@@ -12,17 +12,65 @@
<!-- 左侧广告 --> <!-- 左侧广告 -->
<div class="ad-left"> <div class="ad-left">
<div class="ad-content"> <div class="ad-content">
<h3 class="ad-title-shake">🔥 火<span class="heart-shake">♥</span>热<span class="heart-shake">♥</span>游<span class="heart-shake">♥</span>戏<span class="heart-shake">♥</span>推<span class="heart-shake">♥</span>荐 🔥</h3> <h3 class="ad-title-shake">
<p class="ad-text-shake">爸<span class="heart-shake">♥</span>妈<span class="heart-shake">♥</span>不<span class="heart-shake">♥</span>在<span class="heart-shake">♥</span>家</p> 🔥 🔞游<span class="heart-shake">♥</span>戏<span
<p class="ad-text-shake">一<span class="heart-shake">♥</span>个<span class="heart-shake">♥</span>人<span class="heart-shake">♥</span>寂<span class="heart-shake">♥</span>寞<span class="heart-shake">♥</span>？</p> class="heart-shake"
>♥</span
>推<span class="heart-shake">♥</span>荐 🔥
</h3>
<p class="ad-text-shake">
爸<span class="heart-shake">♥</span>妈<span class="heart-shake"
>♥</span
>不<span class="heart-shake">♥</span>在<span class="heart-shake"
>♥</span
>家
</p>
<p class="ad-text-shake">
一<span class="heart-shake">♥</span>个<span class="heart-shake"
>♥</span
>人<span class="heart-shake">♥</span>寂<span class="heart-shake"
>♥</span
>寞<span class="heart-shake">♥</span>？
</p>
<div class="ad-placeholder"> <div class="ad-placeholder">
<div class="game-ad"> <div class="game-ad">
<div class="language-list"> <div class="language-list">
<div class="game-title game-title-shake">P<span class="heart-shake">♥</span>Y<span class="heart-shake">♥</span>T<span class="heart-shake">♥</span>H<span class="heart-shake">♥</span>O<span class="heart-shake">♥</span>N</div> <div class="game-title game-title-shake">
<div class="game-title game-title-shake">W<span class="heart-shake">♥</span>E<span class="heart-shake">♥</span>B</div> P<span class="heart-shake">♥</span>Y<span class="heart-shake"
<div class="game-title game-title-shake">C<span class="heart-shake">♥</span>语<span class="heart-shake">♥</span>言</div> >♥</span
>T<span class="heart-shake">♥</span>H<span
class="heart-shake"
>♥</span
>O<span class="heart-shake">♥</span>N
</div> </div>
<div class="game-subtitle game-subtitle-shake">劲<span class="heart-shake">♥</span>爽<span class="heart-shake">♥</span>游<span class="heart-shake">♥</span>戏<span class="heart-shake">♥</span>体<span class="heart-shake">♥</span>验</div> <div class="game-title game-title-shake">
W<span class="heart-shake">♥</span>E<span class="heart-shake"
>♥</span
>B
</div>
<div class="game-title game-title-shake">
C<span class="heart-shake">♥</span>语<span
class="heart-shake"
>♥</span
>言
</div>
</div>
<div class="game-subtitle game-subtitle-shake">
劲<span class="heart-shake">♥</span>爽<span class="heart-shake"
>♥</span
>游<span class="heart-shake">♥</span>戏<span
class="heart-shake"
>♥</span
>体<span class="heart-shake">♥</span>验
</div>
<div class="ad-rental game-subtitle-shake">
广<span class="heart-shake">♥</span>告<span class="heart-shake"
>♥</span
>位<span class="heart-shake">♥</span>出<span
class="heart-shake"
>♥</span
>租
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -30,7 +78,7 @@
<div class="container"> <div class="container">
<main class="main"> <main class="main">
<h1 class="title gradient">♥️ 徐越的在线学习平台 ♥️</h1> <h1 class="title gradient">♥️ 物联网专业の在线学习平台 ♥️</h1>
<h2 class="subtitle"></h2> <h2 class="subtitle"></h2>
<div class="grid" id="sites"></div> <div class="grid" id="sites"></div>
</main> </main>
@@ -54,17 +102,66 @@
<!-- 右侧广告 --> <!-- 右侧广告 -->
<div class="ad-right"> <div class="ad-right">
<div class="ad-content"> <div class="ad-content">
<h3 class="ad-title-shake">🎮 游<span class="heart-shake">♥</span>戏<span class="heart-shake">♥</span>时<span class="heart-shake">♥</span>间<span class="heart-shake">♥</span>到 🎮</h3> <h3 class="ad-title-shake">
<p class="ad-text-shake">爸<span class="heart-shake">♥</span>妈<span class="heart-shake">♥</span>不<span class="heart-shake">♥</span>在<span class="heart-shake">♥</span>家</p> 🎮 游<span class="heart-shake">♥</span>戏<span class="heart-shake"
<p class="ad-text-shake">一<span class="heart-shake">♥</span>个<span class="heart-shake">♥</span>人<span class="heart-shake">♥</span>寂<span class="heart-shake">♥</span>寞<span class="heart-shake">♥</span>？</p> >♥</span
>时<span class="heart-shake">♥</span>间<span class="heart-shake"
>♥</span
>到 🎮
</h3>
<p class="ad-text-shake">
爸<span class="heart-shake">♥</span>妈<span class="heart-shake"
>♥</span
>不<span class="heart-shake">♥</span>在<span class="heart-shake"
>♥</span
>家
</p>
<p class="ad-text-shake">
一<span class="heart-shake">♥</span>个<span class="heart-shake"
>♥</span
>人<span class="heart-shake">♥</span>寂<span class="heart-shake"
>♥</span
>寞<span class="heart-shake">♥</span>？
</p>
<div class="ad-placeholder"> <div class="ad-placeholder">
<div class="game-ad"> <div class="game-ad">
<div class="language-list"> <div class="language-list">
<div class="game-title game-title-shake">P<span class="heart-shake">♥</span>Y<span class="heart-shake">♥</span>T<span class="heart-shake">♥</span>H<span class="heart-shake">♥</span>O<span class="heart-shake">♥</span>N</div> <div class="game-title game-title-shake">
<div class="game-title game-title-shake">W<span class="heart-shake">♥</span>E<span class="heart-shake">♥</span>B</div> P<span class="heart-shake">♥</span>Y<span class="heart-shake"
<div class="game-title game-title-shake">C<span class="heart-shake">♥</span>语<span class="heart-shake">♥</span>言</div> >♥</span
>T<span class="heart-shake">♥</span>H<span
class="heart-shake"
>♥</span
>O<span class="heart-shake">♥</span>N
</div> </div>
<div class="game-subtitle game-subtitle-shake">劲<span class="heart-shake">♥</span>爽<span class="heart-shake">♥</span>游<span class="heart-shake">♥</span>戏<span class="heart-shake">♥</span>体<span class="heart-shake">♥</span>验</div> <div class="game-title game-title-shake">
W<span class="heart-shake">♥</span>E<span class="heart-shake"
>♥</span
>B
</div>
<div class="game-title game-title-shake">
C<span class="heart-shake">♥</span>语<span
class="heart-shake"
>♥</span
>言
</div>
</div>
<div class="game-subtitle game-subtitle-shake">
劲<span class="heart-shake">♥</span>爽<span class="heart-shake"
>♥</span
>游<span class="heart-shake">♥</span>戏<span
class="heart-shake"
>♥</span
>体<span class="heart-shake">♥</span>验
</div>
<div class="ad-rental game-subtitle-shake">
广<span class="heart-shake">♥</span>告<span class="heart-shake"
>♥</span
>位<span class="heart-shake">♥</span>出<span
class="heart-shake"
>♥</span
>租
</div>
</div> </div>
</div> </div>
</div> </div>

110
style.css
View File

@@ -67,7 +67,7 @@ a:hover {
/* 广告区域样式 */ /* 广告区域样式 */
.ad-left, .ad-left,
.ad-right { .ad-right {
width: 280px; width: 350px;
min-height: 100vh; min-height: 100vh;
position: fixed; position: fixed;
top: 0; top: 0;
@@ -93,7 +93,7 @@ a:hover {
text-align: center; text-align: center;
box-shadow: 0 4px 15px rgba(255, 182, 193, 0.2); box-shadow: 0 4px 15px rgba(255, 182, 193, 0.2);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
animation: adFloat 3s ease-in-out infinite; animation: adFloat 3s ease-in-out infinite, adShake 2s ease-in-out infinite, adFlash 1.5s ease-in-out infinite;
} }
.ad-content h3 { .ad-content h3 {
@@ -111,8 +111,8 @@ a:hover {
} }
.ad-placeholder { .ad-placeholder {
width: 240px; width: 300px;
height: 400px; height: 300px;
background: linear-gradient(135deg, rgba(255, 182, 193, 0.3) 0%, rgba(221, 160, 221, 0.3) 100%); background: linear-gradient(135deg, rgba(255, 182, 193, 0.3) 0%, rgba(221, 160, 221, 0.3) 100%);
border: 2px solid rgba(255, 105, 180, 0.5); border: 2px solid rgba(255, 105, 180, 0.5);
border-radius: 10px; border-radius: 10px;
@@ -138,7 +138,7 @@ a:hover {
} }
.game-title { .game-title {
font-size: 1.6rem; font-size: 2.2rem;
font-weight: bold; font-weight: bold;
color: #ff1493; color: #ff1493;
text-shadow: 2px 2px 4px rgba(255, 20, 147, 0.3); text-shadow: 2px 2px 4px rgba(255, 20, 147, 0.3);
@@ -153,10 +153,18 @@ a:hover {
text-shadow: 1px 1px 2px rgba(147, 112, 219, 0.3); text-shadow: 1px 1px 2px rgba(147, 112, 219, 0.3);
} }
.ad-rental {
font-size: 1rem;
color: #ff69b4;
margin-top: 0.5rem;
text-shadow: 1px 1px 2px rgba(255, 105, 180, 0.3);
font-weight: bold;
}
.language-list { .language-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.3rem; gap: 0.1rem;
margin-top: 0.5rem; margin-top: 0.5rem;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@@ -197,7 +205,7 @@ a:hover {
color: #ff1493; color: #ff1493;
animation: heartShake 0.5s ease-in-out infinite; animation: heartShake 0.5s ease-in-out infinite;
text-shadow: 0 0 3px rgba(255, 20, 147, 0.6); text-shadow: 0 0 3px rgba(255, 20, 147, 0.6);
font-size: 1.2em; font-size: 0.8em;
margin: 0 0.1em; margin: 0 0.1em;
} }
@@ -263,6 +271,58 @@ a:hover {
50% { transform: translateY(-5px); } 50% { transform: translateY(-5px); }
} }
@keyframes adShake {
0%, 100% {
transform: translateX(0) translateY(0) rotate(0deg);
}
10% {
transform: translateX(-3px) translateY(-3px) rotate(-2deg);
}
20% {
transform: translateX(3px) translateY(3px) rotate(2deg);
}
30% {
transform: translateX(-2px) translateY(2px) rotate(-1.5deg);
}
40% {
transform: translateX(2px) translateY(-2px) rotate(1.5deg);
}
50% {
transform: translateX(-1.5px) translateY(1.5px) rotate(-1deg);
}
60% {
transform: translateX(1.5px) translateY(-1.5px) rotate(1deg);
}
70% {
transform: translateX(-1px) translateY(1px) rotate(-0.5deg);
}
80% {
transform: translateX(1px) translateY(-1px) rotate(0.5deg);
}
90% {
transform: translateX(0) translateY(0) rotate(0deg);
}
}
@keyframes adFlash {
0%, 100% {
opacity: 1;
box-shadow: 0 4px 15px rgba(255, 182, 193, 0.2);
}
25% {
opacity: 0.8;
box-shadow: 0 4px 20px rgba(255, 182, 193, 0.4);
}
50% {
opacity: 1;
box-shadow: 0 4px 25px rgba(255, 182, 193, 0.6);
}
75% {
opacity: 0.9;
box-shadow: 0 4px 30px rgba(255, 182, 193, 0.8);
}
}
@keyframes adPulse { @keyframes adPulse {
0%, 100% { opacity: 0.7; } 0%, 100% { opacity: 0.7; }
50% { opacity: 1; } 50% { opacity: 1; }
@@ -273,7 +333,7 @@ a:hover {
position: relative; position: relative;
z-index: 2; z-index: 2;
flex: 1; flex: 1;
margin: 0 300px; margin: 0 370px;
} }
.main { .main {
display: flex; display: flex;
@@ -567,35 +627,51 @@ a:hover {
} }
} }
@media (max-width: 1400px) { @media (max-width: 1600px) {
.ad-left, .ad-left,
.ad-right { .ad-right {
width: 220px; width: 300px;
} }
.container { .container {
margin: 0 240px; margin: 0 320px;
} }
.ad-placeholder { .ad-placeholder {
width: 180px; width: 250px;
height: 320px; height: 400px;
}
}
@media (max-width: 1400px) {
.ad-left,
.ad-right {
width: 250px;
}
.container {
margin: 0 270px;
}
.ad-placeholder {
width: 200px;
height: 350px;
} }
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
.ad-left, .ad-left,
.ad-right { .ad-right {
width: 180px; width: 200px;
} }
.container { .container {
margin: 0 200px; margin: 0 220px;
} }
.ad-placeholder { .ad-placeholder {
width: 140px; width: 160px;
height: 280px; height: 300px;
} }
} }