:root {
--sea: #1D5A78;
--sky: #6BAED6;
--accent: #3585AC;
--accent-deep: #1D5A78;
--accent-soft: #E0EEF6;
--earth: #C9A227;
--bg: #F2EAD6;
--paper: #FDFBF5;
--ink: #2B3A40;
--ink-soft: #5F6B70;
--ink-faint: #9AA09E;
--line: #E4DAC0;
--serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
background: var(--bg);
color: var(--ink);
font-family: var(--serif);
line-height: 1.9;
min-height: 100vh;
overflow-x: hidden;
display: flex;
flex-direction: column;
}
a { color: inherit; text-decoration: none; }
.wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 28px; }
header { text-align: center; }
.hero { position: relative; padding: 68px 0 0; }
.hero > *:not(.scenes) { position: relative; z-index: 1; }
.site-name {
font-size: 40px; font-weight: 600; letter-spacing: 10px;
text-shadow: 0 1px 14px rgba(255,255,255,0.75), 0 0 3px rgba(255,255,255,0.6);
}
.site-tagline {
margin-top: 12px; font-size: 14px; color: var(--ink-soft); letter-spacing: 3px;
text-shadow: 0 1px 10px rgba(255,255,255,0.8);
}
.seal {
width: 32px; height: 32px; background: var(--sea); margin: 30px auto 0;
border-radius: 3px; position: relative;
}
.seal::after {
content: "海"; color: #fff; font-size: 16px; line-height: 32px;
position: absolute; inset: 0; text-align: center;
}
nav { margin-top: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
nav a {
display: inline-block; margin: 0 14px; font-size: 15px; color: var(--ink-soft);
letter-spacing: 2px; padding: 4px 2px; transition: color .2s;
}
nav a:hover, nav a.on { color: var(--accent); }
main { flex: 1; padding-bottom: 80px; }
.motto { text-align: center; padding: 46px 0 4px; color: var(--ink-soft); font-size: 16px; letter-spacing: 1px; }
.motto .dash { color: var(--ink-faint); margin: 0 10px; }
.section { margin-top: 50px; }
.section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.section-head .dot { width: 8px; height: 8px; background: var(--earth); }
.section-head h2 { font-size: 20px; font-weight: 500; letter-spacing: 6px; }
.section-head .count { font-size: 13px; color: var(--ink-faint); letter-spacing: 0; }
.section-head .more { margin-left: auto; font-size: 13px; color: var(--ink-faint); letter-spacing: 1px; transition: color .2s; }
.section-head .more:hover { color: var(--accent); }
.post {
display: flex; align-items: baseline; gap: 16px;
padding: 18px 2px; border-bottom: 1px dashed var(--line);
transition: background .15s;
}
.post:hover { background: var(--paper); }
.post .title { font-size: 17px; font-weight: 500; transition: color .2s; }
.post:hover .title { color: var(--accent); }
.post .date { margin-left: auto; font-size: 13px; color: var(--ink-faint); white-space: nowrap; }
.feed { position: relative; padding-left: 26px; margin-top: 10px; }
.feed::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.feed-item { position: relative; padding: 12px 0; }
.feed-item::before {
content: ""; position: absolute; left: -23px; top: 21px;
width: 7px; height: 7px; border-radius: 50%; background: var(--earth);
}
.feed-date { font-size: 13px; color: var(--ink-faint); letter-spacing: 1px; }
.feed-text { font-size: 15px; color: var(--ink-soft); margin-top: 2px; }
.book-list { margin-top: 6px; }
.book {
padding: 16px 2px; border-bottom: 1px dashed var(--line);
display: flex; gap: 16px; align-items: baseline; transition: background .15s;
}
.book:hover { background: var(--paper); }
.book .title { font-size: 17px; font-weight: 500; }
.book .author { font-size: 14px; color: var(--ink-soft); }
.book .tag {
font-size: 12px; color: var(--accent); background: var(--accent-soft);
padding: 1px 8px; border-radius: 10px; letter-spacing: 1px; white-space: nowrap;
}
.book .note { width: 100%; font-size: 14px; color: var(--ink-faint); margin-top: 4px; }
.book .year { margin-left: auto; font-size: 13px; color: var(--ink-faint); white-space: nowrap; }
.book-wrap { flex: 1; min-width: 0; }
.book-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cta {
margin-top: 50px; padding: 34px 28px; text-align: center;
background: linear-gradient(160deg,
rgba(255, 252, 244, 0.72) 0%,
rgba(247, 240, 222, 0.42) 55%,
rgba(242, 234, 214, 0) 100%);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: 14px;
}
.cta h2 { font-size: 19px; font-weight: 500; letter-spacing: 4px; }
.cta p { margin-top: 10px; font-size: 14px; color: var(--ink-soft); }
.cta .btn {
display: inline-block; margin-top: 18px; padding: 8px 30px;
border: 1px solid var(--accent); color: var(--accent); border-radius: 20px;
font-size: 14px; letter-spacing: 2px; transition: all .2s;
}
.cta .btn:hover { background: var(--accent); color: #fff; }
/* ===== 动态场景：麦田 / 大海 交替 + 飞鸟 ===== */
.scenes {
position: absolute; top: 0; bottom: 0;
left: 50%; width: 100vw;
transform: translateX(-50%);
overflow: hidden; z-index: 0;
-webkit-mask-image: linear-gradient(to bottom,
transparent 0%, #000 16%, #000 84%, rgba(0,0,0,0.30) 94%, transparent 100%);
mask-image: linear-gradient(to bottom,
transparent 0%, #000 16%, #000 84%, rgba(0,0,0,0.30) 94%, transparent 100%);
}
.scene { position: absolute; inset: 0; opacity: 0; }
/* ===== 动态场景：麦田 / 大海 交替 + 飞鸟 ===== */
.scenes {
position: absolute; top: 0; bottom: 0;
left: 50%; width: 100vw;
transform: translateX(-50%);
overflow: hidden; z-index: 0;
-webkit-mask-image: linear-gradient(to bottom,
transparent 0%, #000 16%, #000 84%, rgba(0,0,0,0.30) 94%, transparent 100%);
mask-image: linear-gradient(to bottom,
transparent 0%, #000 16%, #000 84%, rgba(0,0,0,0.30) 94%, transparent 100%);
}
.scene { position: absolute; inset: 0; opacity: 0; }
/* ================= 场景：麦田 / 大海 ================= */
.scenes {
position: absolute; top: 0; bottom: 0;
left: 50%; width: 100vw;
transform: translateX(-50%);
overflow: hidden; z-index: 0;
-webkit-mask-image: linear-gradient(to bottom,
transparent 0%, #000 16%, #000 84%, rgba(0,0,0,0.30) 94%, transparent 100%);
mask-image: linear-gradient(to bottom,
transparent 0%, #000 16%, #000 84%, rgba(0,0,0,0.30) 94%, transparent 100%);
}
.scene { position: absolute; inset: 0; opacity: 0; }
/* ---------- 太阳：都在高空 ---------- */
.scene .sun {
position: absolute; pointer-events: none;
width: 42%; aspect-ratio: 1 / 1;
border-radius: 50%;
background: radial-gradient(circle closest-side,
rgba(255,252,236,0.62) 0%,
rgba(255,246,200,0.44) 18%,
rgba(255,238,180,0.25) 36%,
rgba(255,234,178,0.10) 56%,
rgba(255,232,175,0) 74%);
-webkit-filter: blur(4px);
filter: blur(4px);
}
.scene-field .sun {
z-index: 1; top: -22%; right: 12%; }
.scene-sea .sun { top: -18%; right: 16%; }
/* ---------- 云 ---------- */
.scene .clouds {
z-index: 1;
position: absolute; left: -6%; right: -6%; top: 0;
pointer-events: none;
background: url("url("data:image/svg+xml;utf8,")") repeat-x;
background-size: 1000px 100%;
animation: cloudDrift 96s linear infinite;
}
@keyframes cloudDrift {
from { background-position: 0 0; }
to { background-position: 1040px 0; }
}
.scene-field .clouds { height: 38%; }
.scene-sea .clouds { height: 42%; }
/* ================= 麦田 =================
自下而上：空地 → 麦田 → 树丛 → 蓝天白云阳光 → 小鸟 */
.scene-field {
background: linear-gradient(to bottom,
#3E86E8 0%, #5E9BEC 11%, #7FAEF0 22%,
#9CC3F2 30%, #BBD6F4 36%, #D5E4F4 39%,
#E5E2C0 42%,
#EFDBA4 44.5%, #F8D68C 47%, #FCE089 51%,
#F8CE7E 61%, #EDBA67 71%, #E0A350 81%,
#D69A44 89%, #CC943B 100%);
animation: sceneField 48s ease-in-out infinite;
}
.scene-field .ground {
z-index: 1;
position: absolute; left: -6%; right: -6%; bottom: 0;
height: 16%;
pointer-events: none;
background: url("url("data:image/svg+xml;utf8,")") repeat-x;
background-size: 1200px 100%;
opacity: 0.40;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 38%, #000 100%);
mask-image: linear-gradient(to bottom, transparent 0%, #000 38%, #000 100%);
animation: groundSettle 14s ease-in-out infinite alternate;
}
.scene-field .ground::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(to bottom, rgba(242,234,214,0.34), rgba(242,234,214,0.68));
}
@keyframes groundSettle {
from { background-position: 0 0; }
to { background-position: -60px 0; }
}
.scene-field .edge {
z-index: 2;
position: absolute; left: 0; right: 0; top: 37.6%;
height: 6.2%;
pointer-events: none;
background: url("url("data:image/svg+xml;utf8,")") repeat-x;
background-size: 660px 100%;
animation: edgeDrift 120s linear infinite;
}
@keyframes edgeDrift {
from { background-position: 0 0; }
to { background-position: -660px 0; }
}
/* 只有一层麦穗 */
.scene-field::before {
z-index: 1;
content: ""; position: absolute; left: 0; right: 0; top: 41.5%; bottom: 15%;
pointer-events: none;
background-repeat: repeat-x;
background-position: left bottom;
background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,");
background-size: 320px 26%, 400px 44%;
animation: wheatRise 5.2s linear infinite;
}
@keyframes wheatRise {
0% { background-position: left bottom; transform: scaleY(1); }
35% { background-position: 14% bottom; transform: scaleY(1.03); }
70% { background-position: 30% bottom; transform: scaleY(0.99); }
100% { background-position: left bottom; transform: scaleY(1); }
}
/* ================= 大海 =================
自下而上：沙滩 → 浅滩 → 海洋 → 蓝天白云阳光 → 海鸥 */
.scene-sea {
background: linear-gradient(to bottom,
#0878E4 0%, #1C8DE4 11%, #42A9EC 22%, #63B9EF 32%,
#8FCDF2 40%, #B8DAF1 46%,
#03A2C6 49%, #18B0CA 54%, #47C9D0 59%,
#92E0D4 64%, #C6EAD2 69%, #E6E9C8 73%,
#EFE1B4 78%, #F5DEB0 86%, #F8E2B8 100%);
animation: sceneSea 48s ease-in-out infinite;
}
/* 海天波纹 */
.scene-sea::before {
z-index: 2;
content: ""; position: absolute; left: 0; right: 0; top: 44%;
height: 11%; pointer-events: none;
background-repeat: repeat-x;
background-position: 0 center;
background-size: 320px 100%;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.36;
animation: rippleDrift 16s linear infinite;
}
@keyframes rippleDrift {
from { background-position: 0 center; }
to { background-position: 320px center; }
}
/* 海面粼光 */
.scene-sea::after {
z-index: 1;
content: ""; position: absolute; left: 0; right: 0; top: 49%; bottom: 28%;
background: repeating-linear-gradient(to bottom,
rgba(255,255,255,0.22) 0 1px, rgba(255,255,255,0) 1px 9px);
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000);
mask-image: linear-gradient(to bottom, transparent, #000 30%, #000);
animation: seaShimmer 13s linear infinite;
}
@keyframes seaShimmer {
from { background-position: 0 0; }
/* 螃蟹：从左沙滩入海，横行海中，右边上岸消失 */
.scene-sea .crab {
position: absolute; z-index: 3;
bottom: 6%;
left: 0;
width: 34px; height: 28px;
background: url("data:image/svg+xml;utf8,") no-repeat center bottom / contain;utf8,") no-repeat center bottom / contain;
transform-origin: 50% 100%;
animation: crabWalk 26s linear infinite;
opacity: 0.95;
}
@keyframes crabWalk {
0% { transform: translateX(-4vw) translateY(0) scaleX(1); opacity: 0; }
4% { transform: translateX(2vw) translateY(0) scaleX(1); opacity: 1; }
/* 走到水边 */
22% { transform: translateX(20vw) translateY(0) scaleX(1); opacity: 1; }
30% { transform: translateX(30vw) translateY(6px) scaleX(1); opacity: 1; }
/* 横行海中（略微上下起伏，像在水中走） */
46% { transform: translateX(46vw) translateY(10px) scaleX(1); opacity: 1; }
60% { transform: translateX(60vw) translateY(8px) scaleX(1); opacity: 1; }
74% { transform: translateX(74vw) translateY(10px) scaleX(1); opacity: 1; }
/* 上岸 */
88% { transform: translateX(88vw) translateY(2px) scaleX(1); opacity: 1; }
95% { transform: translateX(99vw) translateY(-4px) scaleX(1); opacity: 1; }
100% { transform: translateX(108vw) translateY(-8px) scaleX(1); opacity: 0; }
}
@media (max-width: 520px) {
.scene-sea .crab { width: 26px; height: 21px; }
}
to { background-position: 56px 0; }
}
@keyframes sceneField {
0%, 40% { opacity: 1; } 48%, 92% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes sceneSea {
0%, 40% { opacity: 0; } 48%, 92% { opacity: 1; } 100% { opacity: 0; }
}
/* ---------- 小鸟 ---------- */
.lark {
position: absolute; z-index: 3;
width: 14px; height: 14px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
will-change: transform;
animation: larkFly 17s linear infinite;
}
@keyframes larkFly {
0% { transform: translate(-6vw, 20px); }
16% { transform: translate(12vw, 4px); }
33% { transform: translate(28vw, 24px); }
50% { transform: translate(46vw, 2px); }
66% { transform: translate(64vw, 18px); }
83% { transform: translate(82vw, 8px); }
100% { transform: translate(104vw, 16px); }
}
@keyframes larkGlide {
0% { transform: translate(-6vw, 34px); }
22% { transform: translate(18vw, -14px); }
46% { transform: translate(44vw, -30px); }
70% { transform: translate(70vw, -4px); }
100% { transform: translate(104vw, 22px); }
}
.l1 { top: 11%; animation-duration: 17s; animation-delay: 0s; }
.l2 { top: 24%; width: 12px; height: 12px; animation-duration: 21s; animation-delay: 5s; }
.l3 { top: 6%; width: 11px; height: 11px; animation-duration: 26s; animation-delay: 11s; animation-direction: reverse; }
.l4 { top: 30%; width: 16px; height: 16px; animation-name: larkGlide; animation-duration: 30s; animation-delay: 7s; }
.l5 { top: 17%; width: 10px; height: 10px; animation-duration: 23s; animation-delay: 16s; }
/* ---------- 海鸥 ---------- */
.gull {
position: absolute; z-index: 3;
width: 21px; height: 21px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
will-change: transform;
animation: gullFly 26s linear infinite;
}
@keyframes gullFly {
0% { transform: translate(-8vw, 10px); }
20% { transform: translate(16vw, -14px); }
42% { transform: translate(38vw, 2px); }
64% { transform: translate(62vw, -20px); }
84% { transform: translate(84vw, -2px); }
100% { transform: translate(108vw, 14px); }
}
.g2 { top: 18%; width: 16px; height: 16px; animation-duration: 32s; animation-delay: 9s; animation-direction: reverse; }
.g3 { top: 30%; width: 25px; height: 25px; animation-duration: 38s; animation-delay: 18s; }
.page-title { margin-top: 44px; text-align: center; font-size: 28px; font-weight: 500; letter-spacing: 8px; }
.page-sub { text-align: center; margin-top: 8px; font-size: 14px; color: var(--ink-faint); letter-spacing: 2px; }
footer {
text-align: center; padding: 40px 0 56px; font-size: 13px; color: var(--ink-faint);
border-top: 1px solid var(--line); letter-spacing: 1px;
}
footer .beian { margin-top: 10px; font-size: 12px; }
footer a:hover { color: var(--accent); }
@media (max-width: 520px) {
.hero { padding-top: 52px; }
.site-name { font-size: 32px; letter-spacing: 6px; }
nav a { margin: 0 9px; font-size: 14px; }
.post { flex-wrap: wrap; }
.post .date { margin-left: 0; width: 100%; }
.book .year { margin-left: 0; }
}
/* ================= 场景（干净版·追加覆盖） ================= */
.scenes {
position: absolute; top: 0; bottom: 0;
left: 50%; width: 100vw;
transform: translateX(-50%);
overflow: hidden; z-index: 0;
-webkit-mask-image: linear-gradient(to bottom,
transparent 0%, #000 16%, #000 84%, rgba(0,0,0,0.30) 94%, transparent 100%);
mask-image: linear-gradient(to bottom,
transparent 0%, #000 16%, #000 84%, rgba(0,0,0,0.30) 94%, transparent 100%);
}
.scene { position: absolute; inset: 0; opacity: 0; }
/* 太阳 */
.scene .sun {
position: absolute; pointer-events: none;
width: 42%; aspect-ratio: 1 / 1;
border-radius: 50%;
background: radial-gradient(circle closest-side,
rgba(255,252,236,0.62) 0%, rgba(255,246,200,0.44) 18%,
rgba(255,238,180,0.25) 36%, rgba(255,234,178,0.10) 56%,
rgba(255,232,175,0) 74%);
-webkit-filter: blur(4px); filter: blur(4px);
}
.scene-field .sun { top: -22%; right: 12%; }
.scene-sea .sun { top: -18%; right: 16%; }
/* 云：独立文件，带底色兜底 */
.scene .clouds {
position: absolute; left: -6%; right: -6%; top: 0;
height: 40%;
pointer-events: none;
background-color: rgba(255, 255, 255, 0.14);
background-image: url("clouds.svg");
background-repeat: repeat-x;
background-size: 1000px 100%;
animation: cloudDrift2 96s linear infinite;
}
.scene-sea .clouds { height: 42%; }
@keyframes cloudDrift2 {
from { background-position: 0 0; }
to { background-position: 1000px 0; }
}
/* 麦田三段：空地 / 麦田 / 树丛 */
.scene-field {
background: linear-gradient(to bottom,
#3E86E8 0%, #5E9BEC 11%, #7FAEF0 22%,
#9CC3F2 30%, #BBD6F4 36%, #D5E4F4 39%,
#E5E2C0 42%,
#EFDBA4 44.5%, #F8D68C 47%, #FCE089 51%,
#F8CE7E 61%, #EDBA67 71%, #E0A350 81%,
#D69A44 89%, #CC943B 100%);
animation: sceneField2 48s ease-in-out infinite;
}
.scene-field .ground {
position: absolute; left: -6%; right: -6%; bottom: 0;
height: 16%;
pointer-events: none;
background-image: url("ground.svg");
background-repeat: repeat-x;
background-size: 1200px 100%;
opacity: 0.45;
animation: groundSettle2 14s ease-in-out infinite alternate;
}
@keyframes groundSettle2 {
from { background-position: 0 0; }
to { background-position: -60px 0; }
}
.scene-field .edge {
position: absolute; left: 0; right: 0; top: 37%;
height: 7%;
pointer-events: none;
background-color: rgba(100, 130, 70, 0.28);
background-image: url("hedge.svg");
background-repeat: repeat-x;
background-size: 660px 100%;
animation: edgeDrift2 120s linear infinite;
}
@keyframes edgeDrift2 {
from { background-position: 0 0; }
to { background-position: -660px 0; }
}
/* 麦穗：只轻微呼吸，根不动 */
.scene-field::before {
content: ""; position: absolute; left: 0; right: 0; top: 41.5%; bottom: 15%;
pointer-events: none;
background-repeat: repeat-x;
background-position: left bottom;
background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,");
background-size: 320px 26%, 400px 44%;
transform-origin: 50% 100%;
animation: wheatBreathe 6s ease-in-out infinite alternate;
}
@keyframes wheatBreathe {
from { transform: scaleY(1); }
to { transform: scaleY(1.012); }
}
/* 大海：沙滩 / 浅滩 / 海洋 */
.scene-sea {
background: linear-gradient(to bottom,
#0878E4 0%, #1C8DE4 11%, #42A9EC 22%, #63B9EF 32%,
#8FCDF2 40%, #B8DAF1 46%,
#03A2C6 49%, #18B0CA 54%, #47C9D0 59%,
#92E0D4 64%, #C6EAD2 69%, #E6E9C8 73%,
#EFE1B4 78%, #F5DEB0 86%, #F8E2B8 100%);
animation: sceneSea2 48s ease-in-out infinite;
}
.scene-sea::before {
content: ""; position: absolute; left: 0; right: 0; top: 44%;
height: 11%; pointer-events: none;
background-repeat: repeat-x;
background-position: 0 center;
background-size: 320px 100%;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.36;
animation: rippleDrift2 16s linear infinite;
}
@keyframes rippleDrift2 {
from { background-position: 0 center; }
to { background-position: 320px center; }
}
.scene-sea::after {
content: ""; position: absolute; left: 0; right: 0; top: 49%; bottom: 28%;
background: repeating-linear-gradient(to bottom,
rgba(255,255,255,0.22) 0 1px, rgba(255,255,255,0) 1px 9px);
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000);
mask-image: linear-gradient(to bottom, transparent, #000 30%, #000);
animation: seaShimmer2 13s linear infinite;
}
@keyframes seaShimmer2 {
from { background-position: 0 0; }
to { background-position: 56px 0; }
}
@keyframes sceneField2 {
0%, 40% { opacity: 1; } 48%, 92% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes sceneSea2 {
0%, 40% { opacity: 0; } 48%, 92% { opacity: 1; } 100% { opacity: 0; }
}
/* 螃蟹：左沙滩入海，海中横行，右岸消失 */
.scene-sea .crab {
position: absolute; z-index: 3;
bottom: 6%; left: 0;
width: 34px; height: 28px;
background: url("crab.svg") no-repeat center bottom / contain;
opacity: 0.95;
animation: crabWalk2 26s linear infinite;
}
@keyframes crabWalk2 {
0% { transform: translateX(-4vw) translateY(0); opacity: 0; }
4% { transform: translateX(2vw) translateY(0); opacity: 1; }
22% { transform: translateX(20vw) translateY(0); opacity: 1; }
30% { transform: translateX(30vw) translateY(6px); opacity: 1; }
46% { transform: translateX(46vw) translateY(10px); opacity: 1; }
60% { transform: translateX(60vw) translateY(8px); opacity: 1; }
74% { transform: translateX(74vw) translateY(10px); opacity: 1; }
88% { transform: translateX(88vw) translateY(2px); opacity: 1; }
95% { transform: translateX(99vw) translateY(-4px); opacity: 1; }
100% { transform: translateX(108vw) translateY(-8px); opacity: 0; }
}
/* 小鸟 */
.lark {
position: absolute; z-index: 3;
width: 14px; height: 14px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
animation: larkFly2 17s linear infinite;
}
@keyframes larkFly2 {
0% { transform: translate(-6vw, 20px); }
16% { transform: translate(12vw, 4px); }
33% { transform: translate(28vw, 24px); }
50% { transform: translate(46vw, 2px); }
66% { transform: translate(64vw, 18px); }
83% { transform: translate(82vw, 8px); }
100% { transform: translate(104vw, 16px); }
}
@keyframes larkGlide2 {
0% { transform: translate(-6vw, 34px); }
22% { transform: translate(18vw, -14px); }
46% { transform: translate(44vw, -30px); }
70% { transform: translate(70vw, -4px); }
100% { transform: translate(104vw, 22px); }
}
.l1 { top: 11%; animation-duration: 17s; animation-delay: 0s; }
.l2 { top: 24%; width: 12px; height: 12px; animation-duration: 21s; animation-delay: 5s; }
.l3 { top: 6%; width: 11px; height: 11px; animation-duration: 26s; animation-delay: 11s; animation-direction: reverse; }
.l4 { top: 30%; width: 16px; height: 16px; animation-name: larkGlide2; animation-duration: 30s; animation-delay: 7s; }
.l5 { top: 17%; width: 10px; height: 10px; animation-duration: 23s; animation-delay: 16s; }
.gull {
position: absolute; z-index: 3;
width: 21px; height: 21px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
animation: gullFly2 26s linear infinite;
}
@keyframes gullFly2 {
0% { transform: translate(-8vw, 10px); }
20% { transform: translate(16vw, -14px); }
42% { transform: translate(38vw, 2px); }
64% { transform: translate(62vw, -20px); }
84% { transform: translate(84vw, -2px); }
100% { transform: translate(108vw, 14px); }
}
.g2 { top: 18%; width: 16px; height: 16px; animation-duration: 32s; animation-delay: 9s; animation-direction: reverse; }
.g3 { top: 30%; width: 25px; height: 25px; animation-duration: 38s; animation-delay: 18s; }
@media (max-width: 520px) {
.scene-sea .crab { width: 26px; height: 21px; }
}
/* ================= 修正版：云柔化 / 树丛静止融合 / 螃蟹入海上岸 ================= */
.scene .clouds {
position: absolute; left: -6%; right: -6%; top: 0;
height: 40%;
pointer-events: none;
background-image: url("clouds.svg");
background-repeat: repeat-x;
background-size: 1000px 100%;
background-color: transparent;
-webkit-filter: blur(2.6px);
filter: blur(2.6px);
/* 上下都收边，云自然散进天空 */
-webkit-mask-image: linear-gradient(to bottom,
transparent 0%, #000 12%, #000 52%, rgba(0,0,0,0.55) 82%, transparent 100%);
mask-image: linear-gradient(to bottom,
transparent 0%, #000 12%, #000 52%, rgba(0,0,0,0.55) 82%, transparent 100%);
animation: cloudDrift2 110s linear infinite;
}
.scene-sea .clouds { height: 42%; }
/* 树丛：静止（不漂移），上下都渐隐，与天空和麦田都自然衔接 */
.scene-field .edge {
position: absolute; left: 0; right: 0; top: 36.5%;
height: 7.5%;
pointer-events: none;
background-color: transparent;
background-image: url("hedge.svg");
background-repeat: repeat-x;
background-size: 660px 100%;
animation: none;
-webkit-filter: blur(1.1px);
filter: blur(1.1px);
-webkit-mask-image: linear-gradient(to bottom,
transparent 0%, rgba(0,0,0,0.55) 16%, #000 42%, #000 78%, transparent 100%);
mask-image: linear-gradient(to bottom,
transparent 0%, rgba(0,0,0,0.55) 16%, #000 42%, #000 78%, transparent 100%);
}
/* 螃蟹：左侧海滩入海 → 海中横行 → 右侧上岸 → 消失 */
.scene-sea .crab {
position: absolute; z-index: 3;
bottom: 13%;
left: 0;
width: 34px; height: 28px;
background: url("crab.svg") no-repeat center bottom / contain;
opacity: 0.95;
animation: crabWalk3 30s linear infinite;
}
@keyframes crabWalk3 {
0% { bottom: 13%; transform: translateX(-5vw); opacity: 0; }
6% { bottom: 13%; transform: translateX(2vw); opacity: 1; }
/* 沿海滩走到水边 */
24% { bottom: 12%; transform: translateX(20vw); opacity: 1; }
/* 走进海里（下沉） */
36% { bottom: 33%; transform: translateX(31vw); opacity: 1; }
/* 海中横行（上下微浮） */
50% { bottom: 34%; transform: translateX(48vw); opacity: 1; }
64% { bottom: 33%; transform: translateX(64vw); opacity: 1; }
78% { bottom: 34%; transform: translateX(79vw); opacity: 1; }
/* 爬上岸（上浮回沙滩） */
90% { bottom: 14%; transform: translateX(92vw); opacity: 1; }
96% { bottom: 13%; transform: translateX(100vw); opacity: 1; }
100% { bottom: 12%; transform: translateX(110vw); opacity: 0; }
}
/* ================= 螃蟹（最终版） =================
走位：左沙滩出发 → 沿滩 → 下沉入海 → 海中横着走 → 右岸爬出 → 消失
高度用 translateY（像素），不随百分比换算跑偏 */
.scene-sea .crab {
position: absolute;
left: 0;
bottom: 15%;
z-index: 4;
width: 36px; height: 29px;
background: url("crab.svg") no-repeat center bottom / contain;
opacity: 0;
animation: crabWalk4 34s linear infinite;
}
@keyframes crabWalk4 {
/* 出场：左下角沙滩，隐身淡入 */
0% { transform: translate(-6vw, 0); opacity: 0; }
5% { transform: translate(2vw, 0); opacity: 1; }
/* 沿海滩向右走（每步有螃蟹式的横向摆动） */
12% { transform: translate(11vw, -1.5px); opacity: 1; }
20% { transform: translate(21vw, 0); opacity: 1; }
28% { transform: translate(30vw, -1.5px); opacity: 1; }
/* 走到水边，开始下沉入海 */
33% { transform: translate(34vw, -2px); opacity: 1; }
40% { transform: translate(40vw, 26px); opacity: 1; }
/* 海中横着走（持续上下起伏，像在水里） */
50% { transform: translate(51vw, 28px); opacity: 1; }
60% { transform: translate(62vw, 26px); opacity: 1; }
70% { transform: translate(73vw, 28px); opacity: 1; }
78% { transform: translate(82vw, 27px); opacity: 1; }
/* 爬上岸（明显上浮） */
85% { transform: translate(87vw, 10px); opacity: 1; }
91% { transform: translate(93vw, -1px); opacity: 1; }
/* 走上沙滩并淡出 */
96% { transform: translate(100vw, 0); opacity: 1; }
100% { transform: translate(112vw, -2px); opacity: 0; }
}
@media (max-width: 520px) {
.scene-sea .crab { width: 27px; height: 22px; bottom: 16%; }
@keyframes crabWalk4 {
0% { transform: translate(-6vw, 0); opacity: 0; }
5% { transform: translate(2vw, 0); opacity: 1; }
12% { transform: translate(11vw, -1.5px); opacity: 1; }
20% { transform: translate(21vw, 0); opacity: 1; }
28% { transform: translate(30vw, -1.5px); opacity: 1; }
33% { transform: translate(34vw, -2px); opacity: 1; }
40% { transform: translate(40vw, 24px); opacity: 1; }
50% { transform: translate(51vw, 26px); opacity: 1; }
60% { transform: translate(62vw, 24px); opacity: 1; }
70% { transform: translate(73vw, 26px); opacity: 1; }
78% { transform: translate(82vw, 25px); opacity: 1; }
85% { transform: translate(87vw, 9px); opacity: 1; }
91% { transform: translate(93vw, -1px); opacity: 1; }
96% { transform: translate(100vw, 0); opacity: 1; }
100% { transform: translate(112vw, -2px); opacity: 0; }
}
}
/* ================= 螃蟹（最终版：沉入海中消失，海底浮现上岸） ================= */
.scene-sea .crab {
position: absolute;
left: 0;
bottom: 15%;
z-index: 4;
width: 36px; height: 29px;
background: url("crab.svg") no-repeat center bottom / contain;
opacity: 0;
animation: crabWalk5 40s linear infinite;
}
@keyframes crabWalk5 {
/* ── 左侧沙滩：淡入 ── */
0% { transform: translate(-6vw, 0); opacity: 0; }
4% { transform: translate(2vw, 0); opacity: 1; }
/* ── 沿海滩向右走，每步有横向摆动 ── */
10% { transform: translate(10vw, -1.5px); opacity: 1; }
17% { transform: translate(19vw, 0); opacity: 1; }
24% { transform: translate(28vw, -1.5px); opacity: 1; }
29% { transform: translate(33vw, 0); opacity: 1; }
/* ── 走到水边，下沉入海并渐渐消失 ── */
34% { transform: translate(37vw, 4px); opacity: 1; }
39% { transform: translate(41vw, 16px); opacity: 0.55; }
43% { transform: translate(45vw, 28px); opacity: 0; }
/* ── 沉在海底，完全不可见（横向继续潜行） ── */
50% { transform: translate(56vw, 32px); opacity: 0; }
60% { transform: translate(67vw, 34px); opacity: 0; }
70% { transform: translate(78vw, 33px); opacity: 0; }
/* ── 右侧海底：重新浮现（渐显） ── */
76% { transform: translate(84vw, 30px); opacity: 0; }
81% { transform: translate(87vw, 16px); opacity: 0.6; }
85% { transform: translate(89vw, 2px); opacity: 1; }
/* ── 走上右侧沙滩 ── */
91% { transform: translate(96vw, 0); opacity: 1; }
96% { transform: translate(104vw, -1.5px); opacity: 1; }
100% { transform: translate(112vw, 0); opacity: 0; }
}
@media (max-width: 520px) {
.scene-sea .crab { width: 27px; height: 22px; bottom: 16%; }
@keyframes crabWalk5 {
0% { transform: translate(-6vw, 0); opacity: 0; }
4% { transform: translate(2vw, 0); opacity: 1; }
10% { transform: translate(10vw, -1.5px); opacity: 1; }
17% { transform: translate(19vw, 0); opacity: 1; }
24% { transform: translate(28vw, -1.5px); opacity: 1; }
29% { transform: translate(33vw, 0); opacity: 1; }
34% { transform: translate(37vw, 4px); opacity: 1; }
39% { transform: translate(41vw, 14px); opacity: 0.55; }
43% { transform: translate(45vw, 24px); opacity: 0; }
50% { transform: translate(56vw, 28px); opacity: 0; }
60% { transform: translate(67vw, 30px); opacity: 0; }
70% { transform: translate(78vw, 29px); opacity: 0; }
76% { transform: translate(84vw, 26px); opacity: 0; }
81% { transform: translate(87vw, 14px); opacity: 0.6; }
85% { transform: translate(89vw, 2px); opacity: 1; }
91% { transform: translate(96vw, 0); opacity: 1; }
96% { transform: translate(104vw, -1.5px); opacity: 1; }
100% { transform: translate(112vw, 0); opacity: 0; }
}
}