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

139
index.html
View File

@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>徐越的在线学习平台</title>
<title>在线学习平台</title>
</head>
<body>
@@ -12,25 +12,73 @@
<!-- 左侧广告 -->
<div class="ad-left">
<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>
<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>
<h3 class="ad-title-shake">
🔥 🔞游<span class="heart-shake">♥</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="game-ad">
<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">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 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-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 class="container">
<main class="main">
<h1 class="title gradient">♥️ 徐越的在线学习平台 ♥️</h1>
<h1 class="title gradient">♥️ 物联网专业の在线学习平台 ♥️</h1>
<h2 class="subtitle"></h2>
<div class="grid" id="sites"></div>
</main>
@@ -50,21 +98,70 @@
</div>
</div>
</div>
<!-- 右侧广告 -->
<div class="ad-right">
<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>
<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>
<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>
<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="game-ad">
<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">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 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-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>

110
style.css
View File

@@ -67,7 +67,7 @@ a:hover {
/* 广告区域样式 */
.ad-left,
.ad-right {
width: 280px;
width: 350px;
min-height: 100vh;
position: fixed;
top: 0;
@@ -93,7 +93,7 @@ a:hover {
text-align: center;
box-shadow: 0 4px 15px rgba(255, 182, 193, 0.2);
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 {
@@ -111,8 +111,8 @@ a:hover {
}
.ad-placeholder {
width: 240px;
height: 400px;
width: 300px;
height: 300px;
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-radius: 10px;
@@ -138,7 +138,7 @@ a:hover {
}
.game-title {
font-size: 1.6rem;
font-size: 2.2rem;
font-weight: bold;
color: #ff1493;
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);
}
.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 {
display: flex;
flex-direction: column;
gap: 0.3rem;
gap: 0.1rem;
margin-top: 0.5rem;
justify-content: center;
align-items: center;
@@ -197,7 +205,7 @@ a:hover {
color: #ff1493;
animation: heartShake 0.5s ease-in-out infinite;
text-shadow: 0 0 3px rgba(255, 20, 147, 0.6);
font-size: 1.2em;
font-size: 0.8em;
margin: 0 0.1em;
}
@@ -263,6 +271,58 @@ a:hover {
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 {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
@@ -273,7 +333,7 @@ a:hover {
position: relative;
z-index: 2;
flex: 1;
margin: 0 300px;
margin: 0 370px;
}
.main {
display: flex;
@@ -567,35 +627,51 @@ a:hover {
}
}
@media (max-width: 1400px) {
@media (max-width: 1600px) {
.ad-left,
.ad-right {
width: 220px;
width: 300px;
}
.container {
margin: 0 240px;
margin: 0 320px;
}
.ad-placeholder {
width: 180px;
height: 320px;
width: 250px;
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) {
.ad-left,
.ad-right {
width: 180px;
width: 200px;
}
.container {
margin: 0 200px;
margin: 0 220px;
}
.ad-placeholder {
width: 140px;
height: 280px;
width: 160px;
height: 300px;
}
}