-
🎮 游♥戏♥时♥间♥到 🎮
-
爸♥妈♥不♥在♥家
-
一♥个♥人♥寂♥寞♥？
+
+ 🎮 游♥戏♥时♥间♥到 🎮
+
+
+ 爸♥妈♥不♥在♥家
+
+
+ 一♥个♥人♥寂♥寞♥？
+
-
-
P♥Y♥T♥H♥O♥N
-
W♥E♥B
-
C♥语♥言
+
+
+ P♥Y♥T♥H♥O♥N
-
劲♥爽♥游♥戏♥体♥验
+
+ W♥E♥B
+
+
+ C♥语♥言
+
+
+
+ 劲♥爽♥游♥戏♥体♥验
+
+
+ 广♥告♥位♥出♥租
+
diff --git a/style.css b/style.css
index 26ab4ee..325d50a 100644
--- a/style.css
+++ b/style.css
@@ -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;
}
}