| 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", "PingFang SC", serif; } |
| 10 | .stage { |
| 11 | width: 1600px; height: 900px; position: relative; overflow: hidden; |
| 12 | background: |
| 13 | radial-gradient(ellipse at 20% 20%, #D8C5E8 0%, transparent 55%), |
| 14 | radial-gradient(ellipse at 80% 30%, #B8C8E8 0%, transparent 55%), |
| 15 | radial-gradient(ellipse at 60% 90%, #F4C8D8 0%, transparent 55%), |
| 16 | linear-gradient(135deg, #FBF5F0 0%, #F0E8F5 50%, #E8E0F0 100%); |
| 17 | } |
| 18 | /* dreamy glow */ |
| 19 | .glow { position: absolute; border-radius: 50%; filter: blur(80px); } |
| 20 | .g1 { width: 500px; height: 500px; top: -100px; left: -100px; background: #D8C5E8; opacity: 0.5; } |
| 21 | .g2 { width: 420px; height: 420px; bottom: -80px; right: -60px; background: #F4C8D8; opacity: 0.45; } |
| 22 | .g3 { width: 360px; height: 360px; top: 280px; right: 280px; background: #B8C8E8; opacity: 0.35; } |
| 23 | |
| 24 | /* petals / sparkles */ |
| 25 | .petal { position: absolute; color: #F4C8D8; font-size: 18px; opacity: 0.85; } |
| 26 | .star { position: absolute; color: #E8C896; font-size: 16px; opacity: 0.8; } |
| 27 | .p1{top:120px;left:240px;font-size:22px}.p2{top:200px;right:380px} |
| 28 | .p3{bottom:240px;left:320px}.p4{top:380px;right:200px;font-size:14px} |
| 29 | .st1{top:90px;right:240px;font-size:20px}.st2{bottom:200px;right:400px;font-size:14px} |
| 30 | .st3{top:300px;left:140px;font-size:14px}.st4{bottom:340px;right:160px;font-size:18px} |
| 31 | |
| 32 | /* moon */ |
| 33 | .moon { |
| 34 | position: absolute; top: 110px; right: 200px; |
| 35 | width: 100px; height: 100px; border-radius: 50%; |
| 36 | background: radial-gradient(circle at 35% 35%, #FBF5F0 0%, #F4E8D8 60%, #E8C896 100%); |
| 37 | box-shadow: 0 0 60px rgba(232,200,150,0.4); |
| 38 | } |
| 39 | |
| 40 | /* content */ |
| 41 | .content { |
| 42 | position: absolute; top: 50%; left: 50%; transform: translate(-50%, -52%); |
| 43 | text-align: center; z-index: 5; color: #6B5A8A; |
| 44 | width: 1100px; |
| 45 | } |
| 46 | .kicker { |
| 47 | display: inline-block; |
| 48 | background: rgba(255,255,255,0.65); color: #8A6FA8; |
| 49 | font-size: 13px; font-weight: 700; letter-spacing: 5px; |
| 50 | padding: 9px 22px; border-radius: 999px; margin-bottom: 32px; |
| 51 | box-shadow: 0 6px 22px rgba(216,197,232,0.4); |
| 52 | font-family: "PingFang SC", sans-serif; |
| 53 | } |
| 54 | .kicker::before { content: "✿ "; color: #F4A8C8; } |
| 55 | h1 { |
| 56 | font-size: 130px; font-weight: 700; line-height: 1.02; |
| 57 | letter-spacing: 12px; color: #7A68A0; |
| 58 | font-family: "Songti SC", serif; |
| 59 | text-shadow: 0 4px 24px rgba(216,197,232,0.6); |
| 60 | } |
| 61 | h1 .pink { color: #D898B0; font-style: italic; } |
| 62 | h1 .blue { color: #8AA0C8; } |
| 63 | .verse { |
| 64 | font-size: 22px; line-height: 2.1; color: #8A7AA0; |
| 65 | margin: 40px auto 0; max-width: 720px; |
| 66 | font-family: "Songti SC", serif; letter-spacing: 3px; |
| 67 | } |
| 68 | .verse .em { color: #D898B0; } |
| 69 | |
| 70 | /* bottom row */ |
| 71 | .bottom { |
| 72 | position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%); |
| 73 | display: flex; gap: 24px; z-index: 5; |
| 74 | } |
| 75 | .card { |
| 76 | background: rgba(255,255,255,0.6); |
| 77 | backdrop-filter: blur(10px); |
| 78 | border: 1px solid rgba(255,255,255,0.7); |
| 79 | border-radius: 24px; |
| 80 | padding: 22px 32px; text-align: center; |
| 81 | box-shadow: 0 12px 30px rgba(216,197,232,0.35); |
| 82 | min-width: 200px; |
| 83 | } |
| 84 | .card .icon { font-size: 28px; margin-bottom: 8px; } |
| 85 | .card .t { font-size: 18px; font-weight: 700; color: #7A68A0; letter-spacing: 3px; } |
| 86 | .card .d { font-size: 12px; color: #9A8AB8; margin-top: 6px; letter-spacing: 2px; font-family: "PingFang SC", sans-serif; } |
| 87 | |
| 88 | .signature { |
| 89 | position: absolute; top: 70px; left: 90px; z-index: 5; |
| 90 | color: #8A7AA0; font-size: 12px; letter-spacing: 3px; |
| 91 | font-family: "PingFang SC", sans-serif; |
| 92 | } |
| 93 | .signature .b { color: #7A68A0; font-weight: 700; } |
| 94 | .signature::before { content: "✦ "; color: #E8C896; } |
| 95 | |
| 96 | .vol { |
| 97 | position: absolute; top: 70px; right: 90px; z-index: 5; |
| 98 | text-align: right; color: #9A8AB8; |
| 99 | font-size: 12px; letter-spacing: 3px; |
| 100 | font-family: "PingFang SC", sans-serif; |
| 101 | } |
| 102 | .vol .n { color: #D898B0; font-weight: 700; font-size: 14px; } |
| 103 | </style> |
| 104 | </head> |
| 105 | <body> |
| 106 | <div class="stage"> |
| 107 | <div class="glow g1"></div> |
| 108 | <div class="glow g2"></div> |
| 109 | <div class="glow g3"></div> |
| 110 | <div class="moon"></div> |
| 111 | |
| 112 | <div class="petal p1">❀</div> |
| 113 | <div class="petal p2">❀</div> |
| 114 | <div class="petal p3">❀</div> |
| 115 | <div class="petal p4">❀</div> |
| 116 | <div class="star st1">✦</div> |
| 117 | <div class="star st2">✧</div> |
| 118 | <div class="star st3">✦</div> |
| 119 | <div class="star st4">✧</div> |
| 120 | |
| 121 | <div class="signature"> |
| 122 | <span class="b">NUAGE</span> · 色彩共读 |
| 123 | </div> |
| 124 | <div class="vol"> |
| 125 | <div>第 <span class="n">05</span> 期</div> |
| 126 | <div>DREAMY EDITION</div> |
| 127 | </div> |
| 128 | |
| 129 | <div class="content"> |
| 130 | <span class="kicker">DREAMY · 梦幻浪漫</span> |
| 131 | <h1>把<span class="pink">浪漫</span><br>写成<span class="blue">治愈</span>的诗</h1> |
| 132 | <p class="verse">紫是云端的呢喃，粉是花瓣的呼吸，蓝是星河的低语。<br>把每一种颜色，<span class="em">都写成一首治愈的诗</span>。</p> |
| 133 | </div> |
| 134 | |
| 135 | <div class="bottom"> |
| 136 | <div class="card"><div class="icon">🌙</div><div class="t">月色</div><div class="d">MOONLIGHT</div></div> |
| 137 | <div class="card"><div class="icon">🌸</div><div class="t">樱花</div><div class="d">SAKURA</div></div> |
| 138 | <div class="card"><div class="icon">✨</div><div class="t">星河</div><div class="d">STARDUST</div></div> |
| 139 | <div class="card"><div class="icon">🦋</div><div class="t">蝶梦</div><div class="d">PAPILLON</div></div> |
| 140 | </div> |
| 141 | </div> |
| 142 | </body> |
| 143 | </html> |
| 144 |