| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <title>青莲碧蓝 · 梦幻国风</title> |
| 6 | <style> |
| 7 | * { margin: 0; padding: 0; box-sizing: border-box; } |
| 8 | html, body { width: 1600px; height: 900px; overflow: hidden; } |
| 9 | body { font-family: "Songti SC", "STSong", "SimSun", serif; } |
| 10 | .stage { |
| 11 | width: 1600px; height: 900px; position: relative; overflow: hidden; |
| 12 | background: linear-gradient(180deg, #5F469A 0%, #6B5AAE 35%, #5A9FB5 70%, #6BC4CA 100%); |
| 13 | } |
| 14 | /* clouds */ |
| 15 | .cloud { |
| 16 | position: absolute; |
| 17 | background: radial-gradient(ellipse at center, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.15) 50%, transparent 75%); |
| 18 | border-radius: 50%; |
| 19 | filter: blur(6px); |
| 20 | } |
| 21 | .c1 { width: 520px; height: 180px; top: 110px; left: 120px; } |
| 22 | .c2 { width: 380px; height: 140px; top: 200px; right: 200px; opacity: 0.7; } |
| 23 | .c3 { width: 460px; height: 160px; top: 320px; left: 540px; opacity: 0.5; } |
| 24 | /* stars */ |
| 25 | .star { |
| 26 | position: absolute; width: 4px; height: 4px; background: #FFFFFF; |
| 27 | border-radius: 50%; box-shadow: 0 0 8px rgba(255,255,255,0.9); |
| 28 | } |
| 29 | .s1 { top: 90px; left: 380px; } .s2 { top: 140px; left: 760px; } |
| 30 | .s3 { top: 60px; left: 1100px; } .s4 { top: 180px; left: 1340px; } |
| 31 | .s5 { top: 250px; left: 980px; } .s6 { top: 300px; left: 240px; } |
| 32 | .s7 { top: 70px; left: 620px; width: 6px; height: 6px; } |
| 33 | .s8 { top: 220px; left: 1480px; } |
| 34 | /* water ripple lines */ |
| 35 | .ripple { |
| 36 | position: absolute; bottom: 0; left: 0; width: 1600px; height: 180px; |
| 37 | overflow: hidden; |
| 38 | } |
| 39 | .ripple i { |
| 40 | position: absolute; height: 1px; background: rgba(255,255,255,0.35); |
| 41 | border-radius: 50%; |
| 42 | } |
| 43 | .r1 { width: 700px; bottom: 40px; left: 100px; } |
| 44 | .r2 { width: 520px; bottom: 70px; left: 920px; } |
| 45 | .r3 { width: 900px; bottom: 100px; left: 400px; opacity: 0.6; } |
| 46 | .r4 { width: 400px; bottom: 130px; left: 1200px; opacity: 0.5; } |
| 47 | /* moon */ |
| 48 | .moon { |
| 49 | position: absolute; top: 90px; right: 360px; |
| 50 | width: 110px; height: 110px; border-radius: 50%; |
| 51 | background: radial-gradient(circle at 35% 35%, #FFFFFF 0%, #F0E6FF 60%, #E0D4F5 100%); |
| 52 | box-shadow: 0 0 60px rgba(255,255,255,0.5), 0 0 120px rgba(255,255,255,0.25); |
| 53 | } |
| 54 | /* content */ |
| 55 | .content { |
| 56 | position: absolute; top: 50%; left: 50%; transform: translate(-50%, -55%); |
| 57 | text-align: center; z-index: 5; color: #FFFFFF; |
| 58 | } |
| 59 | .kicker { |
| 60 | font-size: 18px; letter-spacing: 12px; font-weight: 300; |
| 61 | opacity: 0.85; margin-bottom: 30px; |
| 62 | font-family: "PingFang SC", sans-serif; |
| 63 | } |
| 64 | .kicker::before, .kicker::after { content: "—"; margin: 0 16px; opacity: 0.5; } |
| 65 | h1 { |
| 66 | font-size: 130px; font-weight: 600; letter-spacing: 18px; |
| 67 | text-shadow: 0 4px 30px rgba(0,0,0,0.25); |
| 68 | margin-bottom: 16px; |
| 69 | } |
| 70 | .h1-sub { |
| 71 | font-size: 56px; font-weight: 300; letter-spacing: 30px; |
| 72 | color: #E8F4F5; margin-bottom: 50px; opacity: 0.9; |
| 73 | } |
| 74 | .verse { |
| 75 | font-size: 22px; font-weight: 300; line-height: 2; |
| 76 | max-width: 720px; margin: 0 auto; |
| 77 | opacity: 0.88; letter-spacing: 3px; |
| 78 | } |
| 79 | .lotus-card { |
| 80 | position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%); |
| 81 | background: rgba(255,255,255,0.12); |
| 82 | backdrop-filter: blur(8px); |
| 83 | border: 1px solid rgba(255,255,255,0.25); |
| 84 | border-radius: 4px; |
| 85 | padding: 18px 48px; |
| 86 | color: #FFFFFF; |
| 87 | display: flex; gap: 60px; align-items: center; |
| 88 | z-index: 5; |
| 89 | } |
| 90 | .lotus-card .item { text-align: center; } |
| 91 | .lotus-card .item .v { font-size: 28px; font-weight: 600; letter-spacing: 4px; } |
| 92 | .lotus-card .item .l { font-size: 13px; opacity: 0.7; letter-spacing: 4px; margin-top: 6px; font-family: "PingFang SC", sans-serif; } |
| 93 | .divider { width: 1px; height: 30px; background: rgba(255,255,255,0.3); } |
| 94 | </style> |
| 95 | </head> |
| 96 | <body> |
| 97 | <div class="stage"> |
| 98 | <div class="cloud c1"></div> |
| 99 | <div class="cloud c2"></div> |
| 100 | <div class="cloud c3"></div> |
| 101 | <div class="star s1"></div><div class="star s2"></div> |
| 102 | <div class="star s3"></div><div class="star s4"></div> |
| 103 | <div class="star s5"></div><div class="star s6"></div> |
| 104 | <div class="star s7"></div><div class="star s8"></div> |
| 105 | <div class="moon"></div> |
| 106 | |
| 107 | <div class="ripple"> |
| 108 | <i class="r1"></i><i class="r2"></i><i class="r3"></i><i class="r4"></i> |
| 109 | </div> |
| 110 | |
| 111 | <div class="content"> |
| 112 | <div class="kicker">山海有期</div> |
| 113 | <h1>青莲碧蓝</h1> |
| 114 | <div class="h1-sub">一眼入梦</div> |
| 115 | <p class="verse">紫是黄昏未尽的霞，蓝是海面初醒的潮。<br>云在天上呼吸，光在水中沉眠。</p> |
| 116 | </div> |
| 117 | |
| 118 | <div class="lotus-card"> |
| 119 | <div class="item"><div class="v">廿四节气</div><div class="l">CULTURE</div></div> |
| 120 | <div class="divider"></div> |
| 121 | <div class="item"><div class="v">东方意境</div><div class="l">AESTHETIC</div></div> |
| 122 | <div class="divider"></div> |
| 123 | <div class="item"><div class="v">治愈共读</div><div class="l">HEALING</div></div> |
| 124 | </div> |
| 125 | </div> |
| 126 | </body> |
| 127 | </html> |
| 128 |