| 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: "PingFang SC", "Microsoft YaHei", sans-serif; color: #333333; } |
| 10 | .stage { |
| 11 | width: 1600px; height: 900px; position: relative; overflow: hidden; |
| 12 | background: linear-gradient(180deg, #48C6F0 0%, #8FD9F0 35%, #FFF0D6 60%, #FFC88A 80%, #FF8A3D 100%); |
| 13 | } |
| 14 | /* sun */ |
| 15 | .sun { |
| 16 | position: absolute; top: 380px; right: 240px; |
| 17 | width: 200px; height: 200px; border-radius: 50%; |
| 18 | background: radial-gradient(circle at 40% 40%, #FFE0A8 0%, #FFB36B 60%, #FF8A3D 100%); |
| 19 | box-shadow: 0 0 80px rgba(255,138,61,0.4); |
| 20 | } |
| 21 | /* clouds */ |
| 22 | .cloud { |
| 23 | position: absolute; background: #FFFFFF; border-radius: 50px; |
| 24 | box-shadow: 30px 0 0 -5px #FFFFFF, -30px 0 0 -5px #FFFFFF, 60px 6px 0 -10px #FFFFFF; |
| 25 | opacity: 0.85; |
| 26 | } |
| 27 | .c1 { width: 110px; height: 36px; top: 130px; left: 200px; } |
| 28 | .c2 { width: 90px; height: 30px; top: 220px; left: 700px; opacity: 0.7; } |
| 29 | .c3 { width: 130px; height: 40px; top: 90px; right: 380px; opacity: 0.8; } |
| 30 | /* gulls */ |
| 31 | .gull { |
| 32 | position: absolute; width: 30px; height: 12px; |
| 33 | border-top: 3px solid #333333; border-radius: 50% 50% 0 0 / 100% 100% 0 0; |
| 34 | opacity: 0.5; |
| 35 | } |
| 36 | .g1 { top: 200px; left: 480px; } |
| 37 | .g2 { top: 240px; left: 540px; transform: scale(0.8); } |
| 38 | /* water */ |
| 39 | .water { |
| 40 | position: absolute; bottom: 0; left: 0; width: 1600px; height: 180px; |
| 41 | background: linear-gradient(180deg, rgba(255,200,138,0.4) 0%, rgba(255,138,61,0.7) 100%); |
| 42 | } |
| 43 | .reflect { |
| 44 | position: absolute; bottom: 0; right: 200px; width: 240px; height: 180px; |
| 45 | background: linear-gradient(180deg, rgba(255,180,107,0.6) 0%, transparent 100%); |
| 46 | filter: blur(8px); |
| 47 | } |
| 48 | .ripple { position: absolute; height: 1px; background: rgba(255,255,255,0.5); border-radius: 50%; } |
| 49 | .r1 { width: 500px; bottom: 50px; left: 100px; } |
| 50 | .r2 { width: 700px; bottom: 90px; left: 500px; opacity: 0.6; } |
| 51 | .r3 { width: 400px; bottom: 130px; left: 1000px; opacity: 0.5; } |
| 52 | |
| 53 | /* content card */ |
| 54 | .card { |
| 55 | position: absolute; top: 120px; left: 110px; z-index: 5; |
| 56 | background: rgba(255,255,255,0.88); |
| 57 | backdrop-filter: blur(10px); |
| 58 | border-radius: 28px; |
| 59 | padding: 50px 56px; |
| 60 | max-width: 720px; |
| 61 | box-shadow: 0 20px 50px rgba(72,198,240,0.18); |
| 62 | } |
| 63 | .card .kicker { |
| 64 | display: inline-block; |
| 65 | background: #FF8A3D; color: #FFFFFF; |
| 66 | font-size: 13px; font-weight: 700; letter-spacing: 3px; |
| 67 | padding: 7px 16px; border-radius: 999px; margin-bottom: 22px; |
| 68 | } |
| 69 | .card h1 { |
| 70 | font-size: 64px; font-weight: 800; letter-spacing: -1px; |
| 71 | color: #2A6B8A; line-height: 1.1; margin-bottom: 16px; |
| 72 | } |
| 73 | .card h1 .o { color: #FF8A3D; } |
| 74 | .card .sub { |
| 75 | font-size: 20px; font-weight: 400; color: #555; |
| 76 | line-height: 1.7; margin-bottom: 28px; |
| 77 | } |
| 78 | .card .stats { display: flex; gap: 36px; } |
| 79 | .card .stat .v { font-size: 34px; font-weight: 800; color: #FF8A3D; line-height: 1; } |
| 80 | .card .stat .l { font-size: 13px; color: #888; margin-top: 6px; letter-spacing: 1px; } |
| 81 | |
| 82 | /* palette chips */ |
| 83 | .palette { |
| 84 | position: absolute; bottom: 70px; right: 110px; z-index: 5; |
| 85 | display: flex; gap: 16px; |
| 86 | } |
| 87 | .chip { |
| 88 | width: 80px; height: 80px; border-radius: 20px; |
| 89 | box-shadow: 0 8px 24px rgba(0,0,0,0.12); |
| 90 | display: flex; align-items: flex-end; justify-content: center; |
| 91 | padding-bottom: 10px; |
| 92 | } |
| 93 | .chip span { |
| 94 | font-size: 10px; font-weight: 700; letter-spacing: 1px; |
| 95 | background: rgba(255,255,255,0.85); color: #333; |
| 96 | padding: 3px 7px; border-radius: 999px; |
| 97 | } |
| 98 | .chip1 { background: #48C6F0; } |
| 99 | .chip2 { background: #FFF0D6; } |
| 100 | .chip3 { background: #FF8A3D; } |
| 101 | </style> |
| 102 | </head> |
| 103 | <body> |
| 104 | <div class="stage"> |
| 105 | <div class="cloud c1"></div> |
| 106 | <div class="cloud c2"></div> |
| 107 | <div class="cloud c3"></div> |
| 108 | <div class="gull g1"></div> |
| 109 | <div class="gull g2"></div> |
| 110 | <div class="sun"></div> |
| 111 | <div class="reflect"></div> |
| 112 | <div class="water"> |
| 113 | <div class="ripple r1"></div> |
| 114 | <div class="ripple r2"></div> |
| 115 | <div class="ripple r3"></div> |
| 116 | </div> |
| 117 | |
| 118 | <div class="card"> |
| 119 | <span class="kicker">HEALING · 治愈系</span> |
| 120 | <h1>把午后<br><span class="o">调成柔光</span></h1> |
| 121 | <p class="sub">从晴空一路走到夕阳，让落日把海面染成橘色。<br>这里没有待办，只有慢慢退潮的温柔。</p> |
| 122 | <div class="stats"> |
| 123 | <div class="stat"><div class="v">128</div><div class="l">EPISODES</div></div> |
| 124 | <div class="stat"><div class="v">5.8万</div><div class="l">SUBSCRIBERS</div></div> |
| 125 | <div class="stat"><div class="v">4.9★</div><div class="l">RATING</div></div> |
| 126 | </div> |
| 127 | </div> |
| 128 | |
| 129 | <div class="palette"> |
| 130 | <div class="chip chip1"><span>#48C6F0</span></div> |
| 131 | <div class="chip chip2"><span>#FFF0D6</span></div> |
| 132 | <div class="chip chip3"><span>#FF8A3D</span></div> |
| 133 | </div> |
| 134 | </div> |
| 135 | </body> |
| 136 | </html> |
| 137 |