This commit is contained in:
41
index.html
41
index.html
@@ -12,10 +12,23 @@
|
|||||||
<div class="promo-left">
|
<div class="promo-left">
|
||||||
<div class="promo-content">
|
<div class="promo-content">
|
||||||
<h3 class="promo-title-shake">
|
<h3 class="promo-title-shake">
|
||||||
🔥 🔞游<span class="heart-shake">♥</span>戏<span
|
<img
|
||||||
class="heart-shake"
|
src="/icons/noto--fire.svg"
|
||||||
|
alt="火"
|
||||||
|
style="width: 1.5em; height: 1.5em; vertical-align: middle"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
src="/icons/noto--no-one-under-eighteen.svg"
|
||||||
|
alt="未满十八禁"
|
||||||
|
style="width: 1em; height: 1em; vertical-align: middle"
|
||||||
|
/>游<span class="heart-shake">♥</span>戏<span class="heart-shake"
|
||||||
>♥</span
|
>♥</span
|
||||||
>推<span class="heart-shake">♥</span>荐 🔥
|
>推<span class="heart-shake">♥</span>荐
|
||||||
|
<img
|
||||||
|
src="/icons/noto--fire.svg"
|
||||||
|
alt="火"
|
||||||
|
style="width: 1.5em; height: 1.5em; vertical-align: middle"
|
||||||
|
/>
|
||||||
</h3>
|
</h3>
|
||||||
<p class="promo-text-shake">
|
<p class="promo-text-shake">
|
||||||
爸<span class="heart-shake">♥</span>妈<span class="heart-shake"
|
爸<span class="heart-shake">♥</span>妈<span class="heart-shake"
|
||||||
@@ -77,7 +90,9 @@
|
|||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<main class="main">
|
<main class="main">
|
||||||
<h1 id="floating-title" class="title gradient">♥️ 物联网专业の在线学习平台 ♥️</h1>
|
<h1 id="floating-title" 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>
|
||||||
@@ -102,11 +117,21 @@
|
|||||||
<div class="promo-right">
|
<div class="promo-right">
|
||||||
<div class="promo-content">
|
<div class="promo-content">
|
||||||
<h3 class="promo-title-shake">
|
<h3 class="promo-title-shake">
|
||||||
🎮 游<span class="heart-shake">♥</span>戏<span class="heart-shake"
|
<img
|
||||||
|
src="/icons/noto--video-game.svg"
|
||||||
|
alt="游戏"
|
||||||
|
style="width: 1.5em; height: 1.5em; vertical-align: middle"
|
||||||
|
/>
|
||||||
|
游<span class="heart-shake">♥</span>戏<span class="heart-shake"
|
||||||
>♥</span
|
>♥</span
|
||||||
>时<span class="heart-shake">♥</span>间<span class="heart-shake"
|
>时<span class="heart-shake">♥</span>间<span class="heart-shake"
|
||||||
>♥</span
|
>♥</span
|
||||||
>到 🎮
|
>到
|
||||||
|
<img
|
||||||
|
src="/icons/noto--video-game.svg"
|
||||||
|
alt="游戏"
|
||||||
|
style="width: 1.5em; height: 1.5em; vertical-align: middle"
|
||||||
|
/>
|
||||||
</h3>
|
</h3>
|
||||||
<p class="promo-text-shake">
|
<p class="promo-text-shake">
|
||||||
爸<span class="heart-shake">♥</span>妈<span class="heart-shake"
|
爸<span class="heart-shake">♥</span>妈<span class="heart-shake"
|
||||||
@@ -167,7 +192,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script type="module" src="/main.js"></script>
|
<script type="module" src="/main.js"></script>
|
||||||
<script type="module" src="/floating-title.js"></script>
|
<script type="module" src="/floating-title.js"></script>
|
||||||
<script type="module" src="/rain-icons.js"></script>
|
<script type="module" src="/rain-icons.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
1
public/icons/noto--fire.svg
Normal file
1
public/icons/noto--fire.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"><radialGradient id="SVG6bAUKdJt" cx="68.884" cy="124.296" r="70.587" gradientTransform="matrix(-1 -.00434 -.00713 1.6408 131.986 -79.345)" gradientUnits="userSpaceOnUse"><stop offset=".314" stop-color="#ff9800"/><stop offset=".662" stop-color="#ff6d00"/><stop offset=".972" stop-color="#f44336"/></radialGradient><path fill="url(#SVG6bAUKdJt)" d="M35.56 40.73c-.57 6.08-.97 16.84 2.62 21.42c0 0-1.69-11.82 13.46-26.65c6.1-5.97 7.51-14.09 5.38-20.18c-1.21-3.45-3.42-6.3-5.34-8.29c-1.12-1.17-.26-3.1 1.37-3.03c9.86.44 25.84 3.18 32.63 20.22c2.98 7.48 3.2 15.21 1.78 23.07c-.9 5.02-4.1 16.18 3.2 17.55c5.21.98 7.73-3.16 8.86-6.14c.47-1.24 2.1-1.55 2.98-.56c8.8 10.01 9.55 21.8 7.73 31.95c-3.52 19.62-23.39 33.9-43.13 33.9c-24.66 0-44.29-14.11-49.38-39.65c-2.05-10.31-1.01-30.71 14.89-45.11c1.18-1.08 3.11-.12 2.95 1.5"/><radialGradient id="SVG5R9TgbPb" cx="64.921" cy="54.062" r="73.86" gradientTransform="matrix(-.0101 .9999 .7525 .0076 26.154 -11.267)" gradientUnits="userSpaceOnUse"><stop offset=".214" stop-color="#fff176"/><stop offset=".328" stop-color="#fff27d"/><stop offset=".487" stop-color="#fff48f"/><stop offset=".672" stop-color="#fff7ad"/><stop offset=".793" stop-color="#fff9c4"/><stop offset=".822" stop-color="#fff8bd" stop-opacity="0.804"/><stop offset=".863" stop-color="#fff6ab" stop-opacity="0.529"/><stop offset=".91" stop-color="#fff38d" stop-opacity="0.209"/><stop offset=".941" stop-color="#fff176" stop-opacity="0"/></radialGradient><path fill="url(#SVG5R9TgbPb)" d="M76.11 77.42c-9.09-11.7-5.02-25.05-2.79-30.37c.3-.7-.5-1.36-1.13-.93c-3.91 2.66-11.92 8.92-15.65 17.73c-5.05 11.91-4.69 17.74-1.7 24.86c1.8 4.29-.29 5.2-1.34 5.36c-1.02.16-1.96-.52-2.71-1.23a16.1 16.1 0 0 1-4.44-7.6c-.16-.62-.97-.79-1.34-.28c-2.8 3.87-4.25 10.08-4.32 14.47C40.47 113 51.68 124 65.24 124c17.09 0 29.54-18.9 19.72-34.7c-2.85-4.6-5.53-7.61-8.85-11.88"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.9 KiB |
1
public/icons/noto--no-one-under-eighteen.svg
Normal file
1
public/icons/noto--no-one-under-eighteen.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"><path fill="#c33" d="M64 4C30.86 4 4 30.86 4 64s26.86 60 60 60s60-26.86 60-60S97.14 4 64 4m50 60a49.37 49.37 0 0 1-11.3 31.6L32.4 25.3A49.37 49.37 0 0 1 64 14c27.61 0 50 22.39 50 50M14 64a49.37 49.37 0 0 1 11.3-31.6l70.3 70.3A49.37 49.37 0 0 1 64 114c-27.61 0-50-22.39-50-50"/><circle cx="60.1" cy="63.1" r="56.1" fill="#f44336"/><path fill="#fff" d="M95.6 102.7A49.37 49.37 0 0 1 64 114c-27.61 0-50-22.39-50-50a49.37 49.37 0 0 1 11.3-31.6l7.1-7.1A49.37 49.37 0 0 1 64 14c27.61 0 50 22.39 50 50a49.37 49.37 0 0 1-11.3 31.6"/><path fill="#231f20" d="M95.6 102.7A49.37 49.37 0 0 1 64 114c-27.61 0-50-22.39-50-50a49.37 49.37 0 0 1 11.3-31.6l7.1-7.1A49.37 49.37 0 0 1 64 14c27.61 0 50 22.39 50 50a49.37 49.37 0 0 1-11.3 31.6"/><path fill="#414042" d="M96.4 103.2c-20.49 16.74-50.66 13.7-67.4-6.79c-14.41-17.63-14.41-42.97 0-60.61l6.8-6.8a47.3 47.3 0 0 1 30.3-10.8c26.45 0 47.9 21.44 47.9 47.9a47.93 47.93 0 0 1-10.8 30.3"/><path fill="#fafafa" d="M93 58.3c.04 2.74-.77 5.43-2.3 7.7a15.3 15.3 0 0 1-6.2 5.3c2.88 1.2 5.37 3.18 7.2 5.7c1.79 2.47 2.74 5.45 2.7 8.5c.19 4.56-1.68 8.97-5.1 12c-3.4 3-7.9 4.5-13.4 4.5s-10.1-1.5-13.4-4.5a15.19 15.19 0 0 1-5.1-12c-.01-3.03.89-5.99 2.6-8.5c1.79-2.55 4.25-4.55 7.1-5.8a15.04 15.04 0 0 1-6.1-5.3a13.57 13.57 0 0 1-2.2-7.7c0-4.9 1.6-8.8 4.7-11.7s7.3-4.3 12.4-4.3s9.2 1.4 12.4 4.3A15.67 15.67 0 0 1 93 58.3m-6.1 27.1c.13-2.98-1-5.88-3.1-8c-2.18-2.07-5.1-3.18-8.1-3.1c-5.69-.39-10.61 3.91-11 9.59q-.045.705 0 1.41c-.14 2.89.91 5.71 2.9 7.8c1.9 1.9 4.7 2.8 8.2 2.8S82 95 83.9 93c2-1.7 3-4.3 3-7.6m-11.1-37c-2.61-.13-5.15.85-7 2.7a9.8 9.8 0 0 0-2.7 7.3c-.11 2.67.87 5.26 2.7 7.2a9.48 9.48 0 0 0 7.1 2.7c2.64.13 5.21-.85 7.1-2.7a9.72 9.72 0 0 0 2.7-7.2c.14-2.69-.88-5.31-2.8-7.2a10.05 10.05 0 0 0-7.1-2.8M49.1 43l-14.3 5.4c-.68.23-1.13.88-1.1 1.6v3.2c0 .94.77 1.71 1.71 1.71c.2 0 .4-.04.59-.11l4.9-1.8a1.7 1.7 0 0 1 2.19 1.01c.07.19.1.39.11.59v45.1c.03.93.77 1.67 1.7 1.7H49c.93-.03 1.67-.77 1.7-1.7V44.1c0-.67-.55-1.22-1.23-1.21c-.06 0-.12 0-.17.01zm35.5-8.3h-1.1a.675.675 0 0 0-.7.66v3.04c.01.38-.28.69-.66.7h-.54a.675.675 0 0 1-.7-.66V28.3c-.01-.38.28-.69.66-.7h3.34c1.11-.07 2.2.25 3.1.9c.74.66 1.14 1.61 1.1 2.6c.02.71-.19 1.41-.6 2c-.26.38-.6.68-1 .9c-.3.24-.42.64-.3 1l2.3 4.2v.1h-1.7a1 1 0 0 1-.7-.4l-1.9-3.7c-.1-.4-.3-.5-.6-.5m-1.8-2.4c-.01.38.28.69.66.7h1.34c.57.02 1.14-.16 1.6-.5c.41-.34.64-.86.6-1.4c.02-.51-.16-1.01-.5-1.4c-.46-.34-1.03-.52-1.6-.5h-1.4a.675.675 0 0 0-.7.66zM77.3 34h-3.9a.43.43 0 0 0-.4.4v2.7c.01.21.19.39.4.4H78c.21.01.39.19.4.4v.8a.43.43 0 0 1-.4.4h-6.6a.43.43 0 0 1-.4-.4V28.1a.43.43 0 0 1 .4-.4H78c.21.01.39.19.4.4v.8a.43.43 0 0 1-.4.4h-4.6a.43.43 0 0 0-.4.4V32c.01.21.19.39.4.4h3.9c.21.01.39.19.4.4v.8c.02.2-.13.38-.34.4zm-16.8 4.7V28.1a.43.43 0 0 1 .4-.4h2.9c.95-.03 1.88.22 2.7.7c.79.42 1.42 1.09 1.8 1.9c.41.88.61 1.83.6 2.8v.6c.03.97-.18 1.93-.6 2.8c-.41.79-1.03 1.45-1.8 1.9c-.83.44-1.76.68-2.7.7h-2.9a.43.43 0 0 1-.4-.4m2-9v7.4c.01.21.19.39.4.4h.9c.91.05 1.79-.32 2.4-1c.62-.8.9-1.8.8-2.8v-.6a4.5 4.5 0 0 0-.8-2.8a2.93 2.93 0 0 0-2.3-1h-1a.43.43 0 0 0-.4.4m-16-2c.21.01.39.19.4.4v7.2c.05 1.1-.39 2.16-1.2 2.9c-.86.74-1.96 1.14-3.1 1.1c-1.12.07-2.23-.29-3.1-1a3.62 3.62 0 0 1-1.1-2.9v-7.2a.43.43 0 0 1 .4-.4H40c.21.01.39.19.4.4v7.2c-.05.63.17 1.25.6 1.7c.46.42 1.08.63 1.7.6c1.15.13 2.18-.69 2.31-1.84c.02-.19.02-.37-.01-.56v-7.1a.43.43 0 0 1 .4-.4c0-.1 1.1-.1 1.1-.1m11 11.4h-1.3c-.1 0-.3-.1-.3-.2l-4.2-6.7c-.2-.3-.8-.2-.8.2v6.2a.43.43 0 0 1-.4.4h-1.2a.43.43 0 0 1-.4-.4V28.1a.43.43 0 0 1 .4-.4h1.3c.1 0 .3.1.3.2l4.2 6.7c.2.3.8.2.8-.2v-6.3a.43.43 0 0 1 .4-.4h1.1c.21.01.39.19.4.4v10.5c.08.17.01.38-.17.47c-.04.02-.08.03-.13.03"/><path fill="#231f20" d="M23.4 35.6L95 102.1l2-1.9l-66.4-66.8" opacity="0.8"/><path fill="#f44336" d="M103.9 96.8L25.3 18.9L18.2 26l78.6 77.9"/><path fill="#ff8a80" d="M45 10.9c1.7-.4 4.2-1.6 5.9-1.1c1.09.3 1.75 1.4 1.5 2.5a2.61 2.61 0 0 1-2 1.5c-3.9.97-7.68 2.35-11.3 4.1A52 52 0 0 0 21 33.7c-1.9 2.7-3.4 5.5-5.8 7.8c-.21.23-.49.37-.8.4a.74.74 0 0 1-.5-.1c-1.2-.5-1.4-1.1-1.2-2.3c.18-1.01.52-1.99 1-2.9q1.515-2.64 3.3-5.1c1.89-2.91 4.11-5.59 6.6-8c6.8-6.3 15.6-11.1 21.4-12.6"/><path fill="#c33" d="m32.4 25.3l-2 2l71.1 71.1l1.8-2.2z"/></svg>
|
||||||
|
After Width: | Height: | Size: 4.1 KiB |
1
public/icons/noto--video-game.svg
Normal file
1
public/icons/noto--video-game.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"><path fill="#464c4f" d="M19.64 35.33c.09-.26-.09-4.82 2.45-8.41s5.87-4.12 8.33-4.56c2.98-.53 10.17-1.4 11.31 1.05s.26 3.77 2.1 4.47s-1.49 4.82-1.49 4.82zm88.25-.09s.72-4.43-1.81-7.42c-3.8-4.51-9.75-5.97-15.38-5.97c-1.81 0-3.98.35-4.68 2.51c-.4 1.25-.68 2.77-1.56 2.94c-.87.18 17.73 5.93 23.43 7.94"/><path fill="#5e6268" d="M39.04 81.29c-2.99 2.32-6.96 18.32-13.17 22.55s-20.28 1.97-21.34-6.66c-.93-7.61.76-23.61 5-39.96s7.5-24.45 17.41-27.1c7.95-2.13 23.53-3.63 38.66-3.48c15.14.15 28.39.15 36.72 3.33c7.47 2.85 12.56 10.6 16.05 25.73c3.48 15.14 6.17 33.34 5.75 39.36c-.61 8.78-13.02 14.38-22.25 7.57c-7.35-5.42-8.78-19.22-12.56-21.19s-47.55-2.27-50.27-.15"/><path fill="#9e9e9e" d="M93.25 77.17c-.72.9.94 2.24 2.12 5.17s4.22 12.63 7.17 15.34c3.68 3.37 6.55 2.74 7.11 1.68s-2.62-3.8-6.36-9.91s-8.54-14.15-10.04-12.28m-82.73-2.49c-1.11.2-4.05 14.96-1.87 21.2c1.82 5.2 8.79 5.49 11.41 4.74c5.22-1.49 6.86-6.55 5.67-7.11c-1.18-.56-5.32 3.4-9.23 1.56c-4.36-2.06-4.3-7.86-4.86-13.72c-.5-5.28-.06-6.86-1.12-6.67m27.49-32.73c-.41 0-4.01-.02-4.01-.02l.02-4.35s.08-3.51-3.68-3.43c-3.37.07-3.3 2.88-3.3 3.43s-.02 4.32-.02 4.32s-3.82-.04-4.53-.02s-3.37.06-3.37 3.49c0 3.24 2.75 3.47 3.37 3.49s4.51.02 4.51.02s-.03 3.63-.02 4.22s.12 3.37 3.49 3.37c3.68 0 3.49-3.37 3.49-3.37l.02-4.19s3.44.03 4.04.02c.86-.02 3.39-.25 3.43-3.68c.03-3.39-3.02-3.3-3.44-3.3"/><circle cx="48.4" cy="62.42" r="8.54" fill="#afafaf"/><circle cx="77.75" cy="62.55" r="8.54" fill="#afafaf"/><circle cx="48.39" cy="62.21" r="5.71" fill="#c8c8c8"/><circle cx="77.75" cy="62.4" r="5.71" fill="#c8c8c8"/><circle cx="85.82" cy="45.67" r="4.6" fill="#2086fa"/><circle cx="94.94" cy="54.48" r="4.6" fill="#06ac48"/><circle cx="104.12" cy="46.4" r="4.6" fill="#f72e26"/><circle cx="95.02" cy="37.01" r="4.6" fill="#fdb700"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
377
style.css
377
style.css
@@ -2,12 +2,47 @@ html,
|
|||||||
body {
|
body {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: 'Orbitron', 'Roboto Mono', 'Fira Mono', 'Consolas', monospace, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
font-family:
|
||||||
|
"Orbitron",
|
||||||
|
"Roboto Mono",
|
||||||
|
"Fira Mono",
|
||||||
|
"Consolas",
|
||||||
|
monospace,
|
||||||
|
-apple-system,
|
||||||
|
BlinkMacSystemFont,
|
||||||
|
Segoe UI,
|
||||||
|
Roboto,
|
||||||
|
Oxygen,
|
||||||
|
Ubuntu,
|
||||||
|
Cantarell,
|
||||||
|
Fira Sans,
|
||||||
|
Droid Sans,
|
||||||
|
Helvetica Neue,
|
||||||
|
sans-serif;
|
||||||
background:
|
background:
|
||||||
radial-gradient(circle at 20% 80%, rgba(255, 182, 193, 0.3) 0%, transparent 50%),
|
radial-gradient(
|
||||||
radial-gradient(circle at 80% 20%, rgba(221, 160, 221, 0.3) 0%, transparent 50%),
|
circle at 20% 80%,
|
||||||
radial-gradient(circle at 40% 40%, rgba(173, 216, 230, 0.2) 0%, transparent 50%),
|
rgba(255, 182, 193, 0.3) 0%,
|
||||||
linear-gradient(135deg, #ffeef8 0%, #f0e6ff 25%, #e6f3ff 50%, #fff0f5 75%, #f8f0ff 100%);
|
transparent 50%
|
||||||
|
),
|
||||||
|
radial-gradient(
|
||||||
|
circle at 80% 20%,
|
||||||
|
rgba(221, 160, 221, 0.3) 0%,
|
||||||
|
transparent 50%
|
||||||
|
),
|
||||||
|
radial-gradient(
|
||||||
|
circle at 40% 40%,
|
||||||
|
rgba(173, 216, 230, 0.2) 0%,
|
||||||
|
transparent 50%
|
||||||
|
),
|
||||||
|
linear-gradient(
|
||||||
|
135deg,
|
||||||
|
#ffeef8 0%,
|
||||||
|
#f0e6ff 25%,
|
||||||
|
#e6f3ff 50%,
|
||||||
|
#fff0f5 75%,
|
||||||
|
#f8f0ff 100%
|
||||||
|
);
|
||||||
color: #4a4a4a;
|
color: #4a4a4a;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
letter-spacing: 0.01em;
|
letter-spacing: 0.01em;
|
||||||
@@ -23,7 +58,7 @@ body {
|
|||||||
|
|
||||||
/* 添加可爱的装饰星星 */
|
/* 添加可爱的装饰星星 */
|
||||||
body::before {
|
body::before {
|
||||||
content: '';
|
content: "";
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
@@ -43,8 +78,12 @@ body::before {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@keyframes twinkle {
|
@keyframes twinkle {
|
||||||
0% { opacity: 0.3; }
|
0% {
|
||||||
100% { opacity: 0.8; }
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 动漫风格链接 */
|
/* 动漫风格链接 */
|
||||||
@@ -93,7 +132,10 @@ a:hover {
|
|||||||
box-shadow: 0 4px 15px rgba(255, 182, 193, 0.2);
|
box-shadow: 0 4px 15px rgba(255, 182, 193, 0.2);
|
||||||
-webkit-backdrop-filter: blur(10px);
|
-webkit-backdrop-filter: blur(10px);
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
animation: adFloat 3s ease-in-out infinite, adShake 2s ease-in-out infinite, adFlash 1.5s ease-in-out infinite;
|
animation:
|
||||||
|
adFloat 3s ease-in-out infinite,
|
||||||
|
adShake 2s ease-in-out infinite,
|
||||||
|
adFlash 1.5s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.promo-content h3 {
|
.promo-content h3 {
|
||||||
@@ -113,7 +155,11 @@ a:hover {
|
|||||||
.promo-placeholder {
|
.promo-placeholder {
|
||||||
width: 300px;
|
width: 300px;
|
||||||
height: 300px;
|
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;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -170,7 +216,6 @@ a:hover {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.play-button {
|
.play-button {
|
||||||
background: linear-gradient(45deg, #ff69b4, #ff1493);
|
background: linear-gradient(45deg, #ff69b4, #ff1493);
|
||||||
color: white;
|
color: white;
|
||||||
@@ -190,13 +235,27 @@ a:hover {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@keyframes gameTitleGlow {
|
@keyframes gameTitleGlow {
|
||||||
0%, 100% { text-shadow: 2px 2px 4px rgba(255, 20, 147, 0.3); }
|
0%,
|
||||||
50% { text-shadow: 2px 2px 8px rgba(255, 20, 147, 0.6), 0 0 12px rgba(255, 20, 147, 0.4); }
|
100% {
|
||||||
|
text-shadow: 2px 2px 4px rgba(255, 20, 147, 0.3);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
text-shadow:
|
||||||
|
2px 2px 8px rgba(255, 20, 147, 0.6),
|
||||||
|
0 0 12px rgba(255, 20, 147, 0.4);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes buttonPulse {
|
@keyframes buttonPulse {
|
||||||
0%, 100% { transform: scale(1); -webkit-transform: scale(1); }
|
0%,
|
||||||
50% { transform: scale(1.05); -webkit-transform: scale(1.05); }
|
100% {
|
||||||
|
transform: scale(1);
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(1.05);
|
||||||
|
-webkit-transform: scale(1.05);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 爱心抖动效果 */
|
/* 爱心抖动效果 */
|
||||||
@@ -218,94 +277,129 @@ a:hover {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@keyframes heartShake {
|
@keyframes heartShake {
|
||||||
0%, 100% {
|
0%,
|
||||||
transform: translateX(0) translateY(0) rotate(0deg) scale(1); -webkit-transform: translateX(0) translateY(0) rotate(0deg) scale(1);
|
100% {
|
||||||
|
transform: translateX(0) translateY(0) rotate(0deg) scale(1);
|
||||||
|
-webkit-transform: translateX(0) translateY(0) rotate(0deg) scale(1);
|
||||||
}
|
}
|
||||||
25% {
|
25% {
|
||||||
transform: translateX(-1px) translateY(-1px) rotate(-2deg) scale(1.1); -webkit-transform: translateX(-1px) translateY(-1px) rotate(-2deg) scale(1.1);
|
transform: translateX(-1px) translateY(-1px) rotate(-2deg) scale(1.1);
|
||||||
|
-webkit-transform: translateX(-1px) translateY(-1px) rotate(-2deg)
|
||||||
|
scale(1.1);
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
transform: translateX(1px) translateY(1px) rotate(2deg) scale(1.2); -webkit-transform: translateX(1px) translateY(1px) rotate(2deg) scale(1.2);
|
transform: translateX(1px) translateY(1px) rotate(2deg) scale(1.2);
|
||||||
|
-webkit-transform: translateX(1px) translateY(1px) rotate(2deg) scale(1.2);
|
||||||
}
|
}
|
||||||
75% {
|
75% {
|
||||||
transform: translateX(-1px) translateY(1px) rotate(-1deg) scale(1.1); -webkit-transform: translateX(-1px) translateY(1px) rotate(-1deg) scale(1.1);
|
transform: translateX(-1px) translateY(1px) rotate(-1deg) scale(1.1);
|
||||||
|
-webkit-transform: translateX(-1px) translateY(1px) rotate(-1deg) scale(1.1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes textShake {
|
@keyframes textShake {
|
||||||
0%, 100% {
|
0%,
|
||||||
transform: translateX(0) translateY(0); -webkit-transform: translateX(0) translateY(0);
|
100% {
|
||||||
|
transform: translateX(0) translateY(0);
|
||||||
|
-webkit-transform: translateX(0) translateY(0);
|
||||||
}
|
}
|
||||||
10% {
|
10% {
|
||||||
transform: translateX(-0.5px) translateY(-0.5px); -webkit-transform: translateX(-0.5px) translateY(-0.5px);
|
transform: translateX(-0.5px) translateY(-0.5px);
|
||||||
|
-webkit-transform: translateX(-0.5px) translateY(-0.5px);
|
||||||
}
|
}
|
||||||
20% {
|
20% {
|
||||||
transform: translateX(0.5px) translateY(0.5px); -webkit-transform: translateX(0.5px) translateY(0.5px);
|
transform: translateX(0.5px) translateY(0.5px);
|
||||||
|
-webkit-transform: translateX(0.5px) translateY(0.5px);
|
||||||
}
|
}
|
||||||
30% {
|
30% {
|
||||||
transform: translateX(-0.3px) translateY(0.3px); -webkit-transform: translateX(-0.3px) translateY(0.3px);
|
transform: translateX(-0.3px) translateY(0.3px);
|
||||||
|
-webkit-transform: translateX(-0.3px) translateY(0.3px);
|
||||||
}
|
}
|
||||||
40% {
|
40% {
|
||||||
transform: translateX(0.3px) translateY(-0.3px); -webkit-transform: translateX(0.3px) translateY(-0.3px);
|
transform: translateX(0.3px) translateY(-0.3px);
|
||||||
|
-webkit-transform: translateX(0.3px) translateY(-0.3px);
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
transform: translateX(-0.2px) translateY(0.2px); -webkit-transform: translateX(-0.2px) translateY(0.2px);
|
transform: translateX(-0.2px) translateY(0.2px);
|
||||||
|
-webkit-transform: translateX(-0.2px) translateY(0.2px);
|
||||||
}
|
}
|
||||||
60% {
|
60% {
|
||||||
transform: translateX(0.2px) translateY(-0.2px); -webkit-transform: translateX(0.2px) translateY(-0.2px);
|
transform: translateX(0.2px) translateY(-0.2px);
|
||||||
|
-webkit-transform: translateX(0.2px) translateY(-0.2px);
|
||||||
}
|
}
|
||||||
70% {
|
70% {
|
||||||
transform: translateX(-0.1px) translateY(0.1px); -webkit-transform: translateX(-0.1px) translateY(0.1px);
|
transform: translateX(-0.1px) translateY(0.1px);
|
||||||
|
-webkit-transform: translateX(-0.1px) translateY(0.1px);
|
||||||
}
|
}
|
||||||
80% {
|
80% {
|
||||||
transform: translateX(0.1px) translateY(-0.1px); -webkit-transform: translateX(0.1px) translateY(-0.1px);
|
transform: translateX(0.1px) translateY(-0.1px);
|
||||||
|
-webkit-transform: translateX(0.1px) translateY(-0.1px);
|
||||||
}
|
}
|
||||||
90% {
|
90% {
|
||||||
transform: translateX(0) translateY(0); -webkit-transform: translateX(0) translateY(0);
|
transform: translateX(0) translateY(0);
|
||||||
|
-webkit-transform: translateX(0) translateY(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@keyframes adFloat {
|
@keyframes adFloat {
|
||||||
0%, 100% { transform: translateY(0px); -webkit-transform: translateY(0px); }
|
0%,
|
||||||
50% { transform: translateY(-5px); -webkit-transform: translateY(-5px); }
|
100% {
|
||||||
|
transform: translateY(0px);
|
||||||
|
-webkit-transform: translateY(0px);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
-webkit-transform: translateY(-5px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes adShake {
|
@keyframes adShake {
|
||||||
0%, 100% {
|
0%,
|
||||||
transform: translateX(0) translateY(0) rotate(0deg); -webkit-transform: translateX(0) translateY(0) rotate(0deg);
|
100% {
|
||||||
|
transform: translateX(0) translateY(0) rotate(0deg);
|
||||||
|
-webkit-transform: translateX(0) translateY(0) rotate(0deg);
|
||||||
}
|
}
|
||||||
10% {
|
10% {
|
||||||
transform: translateX(-3px) translateY(-3px) rotate(-2deg); -webkit-transform: translateX(-3px) translateY(-3px) rotate(-2deg);
|
transform: translateX(-3px) translateY(-3px) rotate(-2deg);
|
||||||
|
-webkit-transform: translateX(-3px) translateY(-3px) rotate(-2deg);
|
||||||
}
|
}
|
||||||
20% {
|
20% {
|
||||||
transform: translateX(3px) translateY(3px) rotate(2deg); -webkit-transform: translateX(3px) translateY(3px) rotate(2deg);
|
transform: translateX(3px) translateY(3px) rotate(2deg);
|
||||||
|
-webkit-transform: translateX(3px) translateY(3px) rotate(2deg);
|
||||||
}
|
}
|
||||||
30% {
|
30% {
|
||||||
transform: translateX(-2px) translateY(2px) rotate(-1.5deg); -webkit-transform: translateX(-2px) translateY(2px) rotate(-1.5deg);
|
transform: translateX(-2px) translateY(2px) rotate(-1.5deg);
|
||||||
|
-webkit-transform: translateX(-2px) translateY(2px) rotate(-1.5deg);
|
||||||
}
|
}
|
||||||
40% {
|
40% {
|
||||||
transform: translateX(2px) translateY(-2px) rotate(1.5deg); -webkit-transform: translateX(2px) translateY(-2px) rotate(1.5deg);
|
transform: translateX(2px) translateY(-2px) rotate(1.5deg);
|
||||||
|
-webkit-transform: translateX(2px) translateY(-2px) rotate(1.5deg);
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
transform: translateX(-1.5px) translateY(1.5px) rotate(-1deg); -webkit-transform: translateX(-1.5px) translateY(1.5px) rotate(-1deg);
|
transform: translateX(-1.5px) translateY(1.5px) rotate(-1deg);
|
||||||
|
-webkit-transform: translateX(-1.5px) translateY(1.5px) rotate(-1deg);
|
||||||
}
|
}
|
||||||
60% {
|
60% {
|
||||||
transform: translateX(1.5px) translateY(-1.5px) rotate(1deg); -webkit-transform: translateX(1.5px) translateY(-1.5px) rotate(1deg);
|
transform: translateX(1.5px) translateY(-1.5px) rotate(1deg);
|
||||||
|
-webkit-transform: translateX(1.5px) translateY(-1.5px) rotate(1deg);
|
||||||
}
|
}
|
||||||
70% {
|
70% {
|
||||||
transform: translateX(-1px) translateY(1px) rotate(-0.5deg); -webkit-transform: translateX(-1px) translateY(1px) rotate(-0.5deg);
|
transform: translateX(-1px) translateY(1px) rotate(-0.5deg);
|
||||||
|
-webkit-transform: translateX(-1px) translateY(1px) rotate(-0.5deg);
|
||||||
}
|
}
|
||||||
80% {
|
80% {
|
||||||
transform: translateX(1px) translateY(-1px) rotate(0.5deg); -webkit-transform: translateX(1px) translateY(-1px) rotate(0.5deg);
|
transform: translateX(1px) translateY(-1px) rotate(0.5deg);
|
||||||
|
-webkit-transform: translateX(1px) translateY(-1px) rotate(0.5deg);
|
||||||
}
|
}
|
||||||
90% {
|
90% {
|
||||||
transform: translateX(0) translateY(0) rotate(0deg); -webkit-transform: translateX(0) translateY(0) rotate(0deg);
|
transform: translateX(0) translateY(0) rotate(0deg);
|
||||||
|
-webkit-transform: translateX(0) translateY(0) rotate(0deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes adFlash {
|
@keyframes adFlash {
|
||||||
0%, 100% {
|
0%,
|
||||||
|
100% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
box-shadow: 0 4px 15px rgba(255, 182, 193, 0.2);
|
box-shadow: 0 4px 15px rgba(255, 182, 193, 0.2);
|
||||||
}
|
}
|
||||||
@@ -324,8 +418,13 @@ a:hover {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@keyframes adPulse {
|
@keyframes adPulse {
|
||||||
0%, 100% { opacity: 0.7; }
|
0%,
|
||||||
50% { opacity: 1; }
|
100% {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
@@ -352,8 +451,13 @@ a:hover {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@keyframes float {
|
@keyframes float {
|
||||||
0%, 100% { transform: translateY(0px); }
|
0%,
|
||||||
50% { transform: translateY(-10px); }
|
100% {
|
||||||
|
transform: translateY(0px);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
@@ -365,7 +469,7 @@ a:hover {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-family: 'Orbitron', sans-serif;
|
font-family: "Orbitron", sans-serif;
|
||||||
color: #ff69b4;
|
color: #ff69b4;
|
||||||
text-shadow: 2px 2px 4px rgba(255, 105, 180, 0.3);
|
text-shadow: 2px 2px 4px rgba(255, 105, 180, 0.3);
|
||||||
letter-spacing: 0.02em;
|
letter-spacing: 0.02em;
|
||||||
@@ -375,13 +479,22 @@ a:hover {
|
|||||||
|
|
||||||
/* 动漫风格渐变文字 */
|
/* 动漫风格渐变文字 */
|
||||||
.title.gradient {
|
.title.gradient {
|
||||||
background: linear-gradient(45deg, #ff69b4 0%, #ff1493 25%, #da70d6 50%, #9370db 75%, #8a2be2 100%);
|
background: linear-gradient(
|
||||||
|
45deg,
|
||||||
|
#ff69b4 0%,
|
||||||
|
#ff1493 25%,
|
||||||
|
#da70d6 50%,
|
||||||
|
#9370db 75%,
|
||||||
|
#8a2be2 100%
|
||||||
|
);
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
background-clip: text;
|
background-clip: text;
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
color: transparent;
|
color: transparent;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
animation: centerRotate 4s linear infinite, rainbow 3s ease-in-out infinite;
|
animation:
|
||||||
|
centerRotate 4s linear infinite,
|
||||||
|
rainbow 3s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
#floating-title {
|
#floating-title {
|
||||||
@@ -394,13 +507,25 @@ a:hover {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@keyframes centerRotate {
|
@keyframes centerRotate {
|
||||||
0% { transform: rotate(0deg); -webkit-transform: rotate(0deg); }
|
0% {
|
||||||
100% { transform: rotate(360deg); -webkit-transform: rotate(360deg); }
|
transform: rotate(0deg);
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
-webkit-transform: rotate(360deg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes rainbow {
|
@keyframes rainbow {
|
||||||
0% { -webkit-filter: hue-rotate(0deg); filter: hue-rotate(0deg); }
|
0% {
|
||||||
100% { -webkit-filter: hue-rotate(360deg); filter: hue-rotate(360deg); }
|
-webkit-filter: hue-rotate(0deg);
|
||||||
|
filter: hue-rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
-webkit-filter: hue-rotate(360deg);
|
||||||
|
filter: hue-rotate(360deg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.title,
|
.title,
|
||||||
@@ -418,13 +543,25 @@ a:hover {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@keyframes pulse {
|
@keyframes pulse {
|
||||||
0%, 100% { opacity: 0.8; }
|
0%,
|
||||||
50% { opacity: 1; }
|
100% {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes float {
|
@keyframes float {
|
||||||
0%, 100% { transform: translateY(0px); -webkit-transform: translateY(0px); }
|
0%,
|
||||||
50% { transform: translateY(-10px); -webkit-transform: translateY(-10px); }
|
100% {
|
||||||
|
transform: translateY(0px);
|
||||||
|
-webkit-transform: translateY(0px);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
-webkit-transform: translateY(-10px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid {
|
.grid {
|
||||||
@@ -455,22 +592,33 @@ a:hover {
|
|||||||
/* 动漫风格卡片 */
|
/* 动漫风格卡片 */
|
||||||
.card {
|
.card {
|
||||||
color: #4a4a4a;
|
color: #4a4a4a;
|
||||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 240, 245, 0.8) 100%);
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
rgba(255, 255, 255, 0.9) 0%,
|
||||||
|
rgba(255, 240, 245, 0.8) 100%
|
||||||
|
);
|
||||||
box-shadow: 0 4px 15px rgba(255, 182, 193, 0.2);
|
box-shadow: 0 4px 15px rgba(255, 182, 193, 0.2);
|
||||||
-webkit-backdrop-filter: blur(10px);
|
-webkit-backdrop-filter: blur(10px);
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
animation: cardFloat 4s ease-in-out infinite, cardRotate 8s linear infinite;
|
animation:
|
||||||
|
cardFloat 4s ease-in-out infinite,
|
||||||
|
cardRotate 8s linear infinite;
|
||||||
transform-origin: center;
|
transform-origin: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card::before {
|
.card::before {
|
||||||
content: '';
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -50%;
|
top: -50%;
|
||||||
left: -50%;
|
left: -50%;
|
||||||
width: 200%;
|
width: 200%;
|
||||||
height: 200%;
|
height: 200%;
|
||||||
background: linear-gradient(45deg, transparent, rgba(255, 182, 193, 0.1), transparent);
|
background: linear-gradient(
|
||||||
|
45deg,
|
||||||
|
transparent,
|
||||||
|
rgba(255, 182, 193, 0.1),
|
||||||
|
transparent
|
||||||
|
);
|
||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
transition: all 0.6s ease;
|
transition: all 0.6s ease;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
@@ -481,31 +629,67 @@ a:hover {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@keyframes shine {
|
@keyframes shine {
|
||||||
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); -webkit-transform: translateX(-100%) translateY(-100%) rotate(45deg); opacity: 0; }
|
0% {
|
||||||
50% { opacity: 1; }
|
transform: translateX(-100%) translateY(-100%) rotate(45deg);
|
||||||
100% { transform: translateX(100%) translateY(100%) rotate(45deg); -webkit-transform: translateX(100%) translateY(100%) rotate(45deg); opacity: 0; }
|
-webkit-transform: translateX(-100%) translateY(-100%) rotate(45deg);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(100%) translateY(100%) rotate(45deg);
|
||||||
|
-webkit-transform: translateX(100%) translateY(100%) rotate(45deg);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes cardFloat {
|
@keyframes cardFloat {
|
||||||
0%, 100% { transform: translateY(0px); -webkit-transform: translateY(0px); }
|
0%,
|
||||||
50% { transform: translateY(-5px); -webkit-transform: translateY(-5px); }
|
100% {
|
||||||
|
transform: translateY(0px);
|
||||||
|
-webkit-transform: translateY(0px);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
-webkit-transform: translateY(-5px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes cardRotate {
|
@keyframes cardRotate {
|
||||||
0% { transform: rotate(0deg); -webkit-transform: rotate(0deg); }
|
0% {
|
||||||
100% { transform: rotate(360deg); -webkit-transform: rotate(360deg); }
|
transform: rotate(0deg);
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
-webkit-transform: rotate(360deg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.card.pin {
|
.card.pin {
|
||||||
background: linear-gradient(135deg, rgba(255, 192, 203, 0.9) 0%, rgba(255, 182, 193, 0.8) 100%);
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
rgba(255, 192, 203, 0.9) 0%,
|
||||||
|
rgba(255, 182, 193, 0.8) 100%
|
||||||
|
);
|
||||||
border-color: rgba(255, 105, 180, 0.6);
|
border-color: rgba(255, 105, 180, 0.6);
|
||||||
animation: pinPulse 2s ease-in-out infinite, cardRotate 8s linear infinite;
|
animation:
|
||||||
|
pinPulse 2s ease-in-out infinite,
|
||||||
|
cardRotate 8s linear infinite;
|
||||||
transform-origin: center;
|
transform-origin: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes pinPulse {
|
@keyframes pinPulse {
|
||||||
0%, 100% { transform: scale(1); -webkit-transform: scale(1); }
|
0%,
|
||||||
50% { transform: scale(1.05); -webkit-transform: scale(1.05); }
|
100% {
|
||||||
|
transform: scale(1);
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(1.05);
|
||||||
|
-webkit-transform: scale(1.05);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.card:hover,
|
.card:hover,
|
||||||
@@ -694,34 +878,9 @@ a:hover {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
html {
|
|
||||||
color-scheme: dark;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
color: #e0e0e0;
|
|
||||||
background:
|
|
||||||
radial-gradient(circle at 20% 80%, rgba(255, 105, 180, 0.2) 0%, transparent 50%),
|
|
||||||
radial-gradient(circle at 80% 20%, rgba(138, 43, 226, 0.2) 0%, transparent 50%),
|
|
||||||
radial-gradient(circle at 40% 40%, rgba(75, 0, 130, 0.1) 0%, transparent 50%),
|
|
||||||
linear-gradient(135deg, #1a0b2e 0%, #16213e 25%, #0f3460 50%, #533483 75%, #7209b7 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
background: linear-gradient(135deg, rgba(30, 30, 30, 0.9) 0%, rgba(50, 20, 50, 0.8) 100%);
|
|
||||||
border-color: rgba(255, 105, 180, 0.4);
|
|
||||||
color: #e0e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pin.card {
|
|
||||||
background: linear-gradient(135deg, rgba(40, 20, 40, 0.9) 0%, rgba(60, 30, 60, 0.8) 100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 添加更多动漫风格装饰 */
|
/* 添加更多动漫风格装饰 */
|
||||||
.main::after {
|
.main::after {
|
||||||
content: '✨';
|
content: "✨";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 20px;
|
top: 20px;
|
||||||
right: 20px;
|
right: 20px;
|
||||||
@@ -742,7 +901,6 @@ a:hover {
|
|||||||
animation-fill-mode: both;
|
animation-fill-mode: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@keyframes rainFall {
|
@keyframes rainFall {
|
||||||
0% {
|
0% {
|
||||||
transform: translateY(0) scale(1) rotate(0deg);
|
transform: translateY(0) scale(1) rotate(0deg);
|
||||||
@@ -760,6 +918,15 @@ a:hover {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
@keyframes sparkle {
|
@keyframes sparkle {
|
||||||
0%, 100% { transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); opacity: 0.7; }
|
0%,
|
||||||
50% { transform: scale(1.2) rotate(180deg); -webkit-transform: scale(1.2) rotate(180deg); opacity: 1; }
|
100% {
|
||||||
|
transform: scale(1) rotate(0deg);
|
||||||
|
-webkit-transform: scale(1) rotate(0deg);
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(1.2) rotate(180deg);
|
||||||
|
-webkit-transform: scale(1.2) rotate(180deg);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user