| 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", serif; } |
| 10 | .stage { |
| 11 | width: 1600px; height: 900px; position: relative; overflow: hidden; |
| 12 | background: linear-gradient(180deg, #9E7059 0%, #B8835A 30%, #D88E50 55%, #EC954E 80%, #F0A968 100%); |
| 13 | } |
| 14 | /* sun glow */ |
| 15 | .sun { |
| 16 | position: absolute; top: 50%; left: 50%; transform: translate(-50%, -38%); |
| 17 | width: 280px; height: 280px; border-radius: 50%; |
| 18 | background: radial-gradient(circle, rgba(255,235,200,0.9) 0%, rgba(244,180,120,0.5) 40%, transparent 70%); |
| 19 | filter: blur(2px); |
| 20 | } |
| 21 | /* clouds */ |
| 22 | .cloud { |
| 23 | position: absolute; |
| 24 | background: radial-gradient(ellipse at center, rgba(255,240,220,0.45) 0%, rgba(255,240,220,0.1) 55%, transparent 75%); |
| 25 | border-radius: 50%; filter: blur(8px); |
| 26 | } |
| 27 | .c1 { width: 600px; height: 200px; top: 80px; left: 80px; } |
| 28 | .c2 { width: 460px; height: 160px; top: 180px; right: 100px; opacity: 0.65; } |
| 29 | .c3 { width: 540px; height: 180px; top: 320px; left: 480px; opacity: 0.45; } |
| 30 | /* sparkles */ |
| 31 | .sp { |
| 32 | position: absolute; width: 5px; height: 5px; |
| 33 | background: #F4D9B0; border-radius: 50%; |
| 34 | box-shadow: 0 0 10px rgba(244,217,176,0.9); |
| 35 | } |
| 36 | .p1{top:120px;left:300px}.p2{top:200px;left:900px} |
| 37 | .p3{top:80px;left:1200px}.p4{top:260px;left:500px;opacity:.7} |
| 38 | .p5{top:340px;left:1300px;opacity:.6}.p6{top:160px;left:700px;opacity:.8} |
| 39 | /* water reflection */ |
| 40 | .water { |
| 41 | position: absolute; bottom: 0; left: 0; width: 1600px; height: 200px; |
| 42 | background: linear-gradient(180deg, rgba(240,169,104,0.3) 0%, rgba(236,149,78,0.6) 100%); |
| 43 | } |
| 44 | .wave { |
| 45 | position: absolute; height: 1px; background: rgba(255,240,220,0.4); |
| 46 | border-radius: 50%; |
| 47 | } |
| 48 | .w1 { width: 600px; bottom: 50px; left: 150px; } |
| 49 | .w2 { width: 800px; bottom: 90px; left: 600px; opacity: 0.5; } |
| 50 | .w3 { width: 400px; bottom: 130px; left: 1100px; opacity: 0.4; } |
| 51 | /* content */ |
| 52 | .content { |
| 53 | position: absolute; top: 130px; left: 50%; transform: translateX(-50%); |
| 54 | text-align: center; z-index: 5; color: #FBF3E8; |
| 55 | } |
| 56 | .kicker { |
| 57 | font-size: 17px; letter-spacing: 14px; font-weight: 300; |
| 58 | opacity: 0.85; margin-bottom: 28px; |
| 59 | font-family: "PingFang SC", sans-serif; |
| 60 | } |
| 61 | .kicker::before, .kicker::after { content: "·"; margin: 0 18px; opacity: 0.6; } |
| 62 | h1 { |
| 63 | font-size: 120px; font-weight: 600; letter-spacing: 24px; |
| 64 | text-shadow: 0 4px 30px rgba(120,60,30,0.35); |
| 65 | margin-bottom: 14px; |
| 66 | } |
| 67 | .h-sub { |
| 68 | font-size: 48px; font-weight: 300; letter-spacing: 20px; |
| 69 | opacity: 0.92; margin-bottom: 40px; |
| 70 | } |
| 71 | .verse { |
| 72 | font-size: 22px; font-weight: 300; line-height: 2; |
| 73 | max-width: 760px; margin: 0 auto; |
| 74 | opacity: 0.9; letter-spacing: 3px; |
| 75 | } |
| 76 | /* bottom card */ |
| 77 | .seal { |
| 78 | position: absolute; bottom: 70px; right: 90px; z-index: 5; |
| 79 | width: 110px; height: 110px; |
| 80 | background: rgba(120,60,30,0.85); |
| 81 | border-radius: 6px; |
| 82 | display: flex; flex-direction: column; |
| 83 | align-items: center; justify-content: center; |
| 84 | color: #FBF3E8; |
| 85 | transform: rotate(-3deg); |
| 86 | box-shadow: 0 8px 30px rgba(120,60,30,0.4); |
| 87 | } |
| 88 | .seal .ch { font-size: 38px; font-weight: 700; letter-spacing: 4px; line-height: 1.1; } |
| 89 | .seal .en { font-size: 10px; letter-spacing: 3px; margin-top: 8px; opacity: 0.8; font-family: "PingFang SC", sans-serif; } |
| 90 | .meta-bar { |
| 91 | position: absolute; bottom: 90px; left: 90px; z-index: 5; |
| 92 | color: #FBF3E8; font-family: "PingFang SC", sans-serif; |
| 93 | } |
| 94 | .meta-bar .t { font-size: 16px; letter-spacing: 4px; opacity: 0.75; margin-bottom: 10px; } |
| 95 | .meta-bar .v { font-size: 22px; font-weight: 500; letter-spacing: 2px; } |
| 96 | .meta-bar .d { font-size: 13px; opacity: 0.7; margin-top: 6px; letter-spacing: 1px; } |
| 97 | </style> |
| 98 | </head> |
| 99 | <body> |
| 100 | <div class="stage"> |
| 101 | <div class="cloud c1"></div> |
| 102 | <div class="cloud c2"></div> |
| 103 | <div class="cloud c3"></div> |
| 104 | <div class="sun"></div> |
| 105 | <div class="sp p1"></div><div class="sp p2"></div> |
| 106 | <div class="sp p3"></div><div class="sp p4"></div> |
| 107 | <div class="sp p5"></div><div class="sp p6"></div> |
| 108 | |
| 109 | <div class="water"> |
| 110 | <div class="wave w1"></div><div class="wave w2"></div><div class="wave w3"></div> |
| 111 | </div> |
| 112 | |
| 113 | <div class="content"> |
| 114 | <div class="kicker">东方色集</div> |
| 115 | <h1>扁豆紫 · 蜜陀僧</h1> |
| 116 | <div class="h-sub">黄昏入梦</div> |
| 117 | <p class="verse">紫是云将散未散的余温，橙是日未落先燃的焰。<br>一色一名，一物一境。</p> |
| 118 | </div> |
| 119 | |
| 120 | <div class="meta-bar"> |
| 121 | <div class="t">第 七 期 · 处暑</div> |
| 122 | <div class="v">古色新读 · 治愈共读</div> |
| 123 | <div class="d">2026 · 秋分专场 · 9.22</div> |
| 124 | </div> |
| 125 | |
| 126 | <div class="seal"> |
| 127 | <div class="ch">治愈</div> |
| 128 | <div class="en">HEALING</div> |
| 129 | </div> |
| 130 | </div> |
| 131 | </body> |
| 132 | </html> |
| 133 |