| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh-CN"> |
| 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; font-family:"Songti SC","Noto Serif SC","SimSun",serif; } |
| 9 | .canvas { |
| 10 | width: 1600px; height: 900px; position: relative; color: #FFFFFF; |
| 11 | background: |
| 12 | linear-gradient(125deg, #0A2E5C 0%, #0A2E5C 48%, #2A3A5C 50%, #8A5030 52%, #FF8C42 54%, #FF8C42 100%); |
| 13 | overflow: hidden; |
| 14 | } |
| 15 | |
| 16 | /* 星河半边星点 */ |
| 17 | .stars { position: absolute; top:0; left:0; width: 60%; height: 70%; } |
| 18 | /* 烟火半边粒子 */ |
| 19 | .firework-particles { position: absolute; right: 0; bottom: 0; width: 55%; height: 75%; } |
| 20 | |
| 21 | /* 对角柔光 */ |
| 22 | .soft-glow { |
| 23 | position: absolute; top: 30%; left: 35%; width: 30%; height: 40%; |
| 24 | background: radial-gradient(ellipse, rgba(255,215,0,0.15) 0%, transparent 70%); |
| 25 | filter: blur(20px); |
| 26 | } |
| 27 | |
| 28 | /* 月亮（星河侧） */ |
| 29 | .moon { |
| 30 | position: absolute; top: 90px; left: 180px; |
| 31 | width: 90px; height: 90px; border-radius: 50%; |
| 32 | background: radial-gradient(circle at 35% 35%, #FFFFFF 0%, #FFF3D6 60%, #4A90E2 100%); |
| 33 | box-shadow: 0 0 50px rgba(255,255,255,0.4); |
| 34 | } |
| 35 | |
| 36 | /* 烟火圆心（烟火侧） */ |
| 37 | .fire-core { |
| 38 | position: absolute; bottom: 200px; right: 240px; |
| 39 | width: 16px; height: 16px; border-radius: 50%; |
| 40 | background: radial-gradient(circle, #FFFFFF 0%, #FFD700 50%, #FF8C42 100%); |
| 41 | box-shadow: 0 0 40px rgba(255,215,0,0.8); |
| 42 | } |
| 43 | |
| 44 | /* 标签 */ |
| 45 | .tag { |
| 46 | position: absolute; top: 70px; left: 50%; transform: translateX(-50%); z-index: 6; |
| 47 | font-size: 15px; letter-spacing: 8px; font-weight: 600; |
| 48 | color: #FFF3D6; text-shadow: 0 1px 4px rgba(0,0,0,0.5); |
| 49 | font-family:"Helvetica Neue",sans-serif; |
| 50 | } |
| 51 | .tag::before, .tag::after { content:""; display:inline-block; width:30px; height:1px; background:#FFD700; vertical-align:middle; margin:0 14px;} |
| 52 | |
| 53 | /* 主标题（跨对角居中） */ |
| 54 | .title { |
| 55 | position: absolute; top: 200px; left: 50%; transform: translateX(-50%); z-index: 6; |
| 56 | text-align: center; |
| 57 | } |
| 58 | .main-title { |
| 59 | font-size: 96px; font-weight: 700; line-height: 1.15; |
| 60 | letter-spacing: 12px; color: #FFFFFF; |
| 61 | text-shadow: 0 2px 12px rgba(0,0,0,0.5); |
| 62 | } |
| 63 | .main-title .blue { color: #B8D4F0; } |
| 64 | .main-title .orange { color: #FFD700; } |
| 65 | .sub-title { |
| 66 | font-size: 24px; color: #FFF3D6; letter-spacing: 10px; |
| 67 | margin-top: 26px; font-weight: 300; font-family:"STKaiti",serif; |
| 68 | text-shadow: 0 1px 6px rgba(0,0,0,0.4); |
| 69 | } |
| 70 | |
| 71 | /* 剪影 */ |
| 72 | .silhouette { |
| 73 | position: absolute; bottom: 80px; z-index: 5; |
| 74 | } |
| 75 | .sil1 { left: 38%; } |
| 76 | .sil2 { left: 56%; } |
| 77 | |
| 78 | /* 左下引文 */ |
| 79 | .quote-l { |
| 80 | position: absolute; left: 80px; bottom: 120px; z-index: 6; |
| 81 | width: 320px; font-size: 18px; line-height: 1.9; |
| 82 | color: #B8D4F0; letter-spacing: 2px; font-weight: 300; |
| 83 | font-family:"Songti SC",serif; |
| 84 | } |
| 85 | .quote-l .em { color: #FFD700; } |
| 86 | |
| 87 | /* 右下引文 */ |
| 88 | .quote-r { |
| 89 | position: absolute; right: 80px; bottom: 120px; z-index: 6; |
| 90 | width: 320px; font-size: 18px; line-height: 1.9; text-align: right; |
| 91 | color: #FFF3D6; letter-spacing: 2px; font-weight: 300; |
| 92 | font-family:"Songti SC",serif; |
| 93 | } |
| 94 | .quote-r .em { color: #FFD700; } |
| 95 | |
| 96 | /* 底部 */ |
| 97 | .footer { |
| 98 | position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); z-index:6; |
| 99 | font-size: 13px; color: #FFF3D6; letter-spacing: 5px; opacity: 0.7; |
| 100 | font-family:"Helvetica Neue",sans-serif; |
| 101 | } |
| 102 | </style> |
| 103 | </head> |
| 104 | <body> |
| 105 | <div class="canvas"> |
| 106 | <!-- 星点 --> |
| 107 | <svg class="stars" viewBox="0 0 960 630" preserveAspectRatio="none"> |
| 108 | <g fill="#FFFFFF"> |
| 109 | <circle cx="80" cy="100" r="1.5" opacity="0.9"/> |
| 110 | <circle cx="220" cy="60" r="1" opacity="0.7"/> |
| 111 | <circle cx="360" cy="140" r="2" opacity="0.95"/> |
| 112 | <circle cx="140" cy="240" r="1" opacity="0.6"/> |
| 113 | <circle cx="300" cy="320" r="1.5" opacity="0.85"/> |
| 114 | <circle cx="460" cy="220" r="1" opacity="0.7"/> |
| 115 | <circle cx="200" cy="420" r="2" opacity="0.9"/> |
| 116 | <circle cx="80" cy="520" r="1" opacity="0.6"/> |
| 117 | <circle cx="520" cy="120" r="1.5" opacity="0.8"/> |
| 118 | <circle cx="600" cy="280" r="1" opacity="0.6"/> |
| 119 | <circle cx="380" cy="500" r="1" opacity="0.5"/> |
| 120 | </g> |
| 121 | <g fill="#4A90E2"> |
| 122 | <circle cx="160" cy="180" r="2.5" opacity="0.9"/> |
| 123 | <circle cx="420" cy="380" r="2" opacity="0.8"/> |
| 124 | </g> |
| 125 | <g fill="#FFD700"> |
| 126 | <circle cx="280" cy="120" r="2" opacity="0.9"/> |
| 127 | <circle cx="500" cy="440" r="2.5" opacity="0.85"/> |
| 128 | </g> |
| 129 | </svg> |
| 130 | |
| 131 | <!-- 烟火粒子 --> |
| 132 | <svg class="firework-particles" viewBox="0 0 880 675" preserveAspectRatio="none"> |
| 133 | <g stroke="#FFD700" stroke-width="1.5" fill="none" opacity="0.8"> |
| 134 | <line x1="600" y1="300" x2="600" y2="220"/> |
| 135 | <line x1="600" y1="300" x2="660" y2="240"/> |
| 136 | <line x1="600" y1="300" x2="700" y2="300"/> |
| 137 | <line x1="600" y1="300" x2="660" y2="360"/> |
| 138 | <line x1="600" y1="300" x2="600" y2="380"/> |
| 139 | <line x1="600" y1="300" x2="540" y2="360"/> |
| 140 | <line x1="600" y1="300" x2="500" y2="300"/> |
| 141 | <line x1="600" y1="300" x2="540" y2="240"/> |
| 142 | </g> |
| 143 | <g fill="#FFA500"> |
| 144 | <circle cx="600" cy="220" r="3"/><circle cx="660" cy="240" r="3"/> |
| 145 | <circle cx="700" cy="300" r="3"/><circle cx="660" cy="360" r="3"/> |
| 146 | <circle cx="600" cy="380" r="3"/><circle cx="540" cy="360" r="3"/> |
| 147 | <circle cx="500" cy="300" r="3"/><circle cx="540" cy="240" r="3"/> |
| 148 | </g> |
| 149 | <g fill="#FFD700" opacity="0.7"> |
| 150 | <circle cx="780" cy="180" r="2"/><circle cx="820" cy="220" r="1.5"/> |
| 151 | <circle cx="760" cy="440" r="2"/><circle cx="820" cy="480" r="1.5"/> |
| 152 | <circle cx="680" cy="540" r="2"/> |
| 153 | </g> |
| 154 | </svg> |
| 155 | |
| 156 | <div class="soft-glow"></div> |
| 157 | <div class="moon"></div> |
| 158 | <div class="fire-core"></div> |
| 159 | |
| 160 | <div class="tag">HALF STARRY RIVER · HALF FIREWORKS</div> |
| 161 | |
| 162 | <div class="title"> |
| 163 | <div class="main-title">一半<span class="blue">星河</span> · 一半<span class="orange">烟火</span></div> |
| 164 | <div class="sub-title">仰望永恒 · 拥抱绚烂</div> |
| 165 | </div> |
| 166 | |
| 167 | <!-- 剪影 --> |
| 168 | <svg class="silhouette sil1" width="80" height="200" viewBox="0 0 80 200"> |
| 169 | <path d="M40,200 L40,120 Q30,100 32,80 Q34,55 40,50 Q46,55 48,80 Q50,100 40,120 L42,200 Z M32,80 Q20,90 18,110" fill="#000000" opacity="0.9"/> |
| 170 | <circle cx="40" cy="40" r="12" fill="#000000" opacity="0.9"/> |
| 171 | </svg> |
| 172 | <svg class="silhouette sil2" width="70" height="180" viewBox="0 0 70 180"> |
| 173 | <path d="M35,180 L35,110 Q28,95 30,78 Q32,58 35,54 Q38,58 40,78 Q42,95 35,110 L37,180 Z" fill="#000000" opacity="0.9"/> |
| 174 | <circle cx="35" cy="44" r="10" fill="#000000" opacity="0.9"/> |
| 175 | </svg> |
| 176 | |
| 177 | <div class="quote-l"> |
| 178 | 星河滚烫，<br> |
| 179 | 是<span class="em">永恒</span>的寂静，<br> |
| 180 | 照亮每一个仰望的夜。 |
| 181 | </div> |
| 182 | |
| 183 | <div class="quote-r"> |
| 184 | 人间烟火，<br> |
| 185 | 是<span class="em">瞬间</span>的绚烂，<br> |
| 186 | 温暖每一个归家的人。 |
| 187 | </div> |
| 188 | |
| 189 | <div class="footer">STARLIGHT FIREWORKS · VOL. 14 · 一半星河一半烟火</div> |
| 190 | </div> |
| 191 | </body> |
| 192 | </html> |
| 193 |