| 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; } |
| 10 | .stage { |
| 11 | width: 1600px; height: 900px; position: relative; overflow: hidden; |
| 12 | background: |
| 13 | radial-gradient(ellipse at 20% 30%, #D8C5E8 0%, transparent 55%), |
| 14 | radial-gradient(ellipse at 80% 20%, #B8C8E8 0%, transparent 55%), |
| 15 | radial-gradient(ellipse at 70% 80%, #F4D9D0 0%, transparent 55%), |
| 16 | linear-gradient(135deg, #F0E6F5 0%, #E8E0F0 100%); |
| 17 | } |
| 18 | |
| 19 | /* soft blobs */ |
| 20 | .blob { position: absolute; border-radius: 50%; filter: blur(50px); } |
| 21 | .b1 { width: 400px; height: 400px; top: -80px; left: -60px; background: #D8C5E8; opacity: 0.6; } |
| 22 | .b2 { width: 360px; height: 360px; bottom: -80px; right: -40px; background: #F4D9D0; opacity: 0.55; } |
| 23 | .b3 { width: 300px; height: 300px; top: 300px; right: 200px; background: #B8C8E8; opacity: 0.4; } |
| 24 | |
| 25 | /* sparkles */ |
| 26 | .spark { position: absolute; color: #E8C896; font-size: 22px; } |
| 27 | .sp1 { top: 120px; left: 280px; font-size: 28px; } |
| 28 | .sp2 { top: 200px; right: 320px; font-size: 20px; } |
| 29 | .sp3 { top: 380px; left: 180px; font-size: 16px; } |
| 30 | .sp4 { bottom: 240px; right: 180px; font-size: 26px; } |
| 31 | .sp5 { top: 160px; right: 120px; font-size: 18px; } |
| 32 | .sp6 { bottom: 180px; left: 320px; font-size: 22px; } |
| 33 | .sp7 { top: 480px; right: 420px; font-size: 14px; } |
| 34 | .sp8 { bottom: 320px; left: 600px; font-size: 18px; } |
| 35 | |
| 36 | /* moon */ |
| 37 | .moon { |
| 38 | position: absolute; top: 130px; right: 160px; |
| 39 | width: 120px; height: 120px; border-radius: 50%; |
| 40 | background: radial-gradient(circle at 35% 35%, #FBF5F0 0%, #F4E8D0 60%, #E8C896 100%); |
| 41 | box-shadow: 0 0 50px rgba(232,200,150,0.5); |
| 42 | } |
| 43 | .moon::after { |
| 44 | content: ""; position: absolute; top: 25px; right: 30px; |
| 45 | width: 18px; height: 18px; border-radius: 50%; |
| 46 | background: rgba(232,200,150,0.3); |
| 47 | } |
| 48 | |
| 49 | /* clouds */ |
| 50 | .cloud { |
| 51 | position: absolute; background: rgba(255,255,255,0.6); border-radius: 40px; |
| 52 | box-shadow: 24px 0 0 -4px rgba(255,255,255,0.6), -24px 4px 0 -6px rgba(255,255,255,0.6); |
| 53 | } |
| 54 | .cl1 { width: 90px; height: 28px; top: 250px; left: 200px; } |
| 55 | .cl2 { width: 70px; height: 24px; bottom: 280px; right: 280px; opacity: 0.7; } |
| 56 | |
| 57 | /* main content */ |
| 58 | .content { |
| 59 | position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); |
| 60 | text-align: center; z-index: 5; color: #6B5A8A; |
| 61 | width: 1000px; |
| 62 | } |
| 63 | .kicker { |
| 64 | display: inline-block; |
| 65 | background: rgba(255,255,255,0.7); color: #9A7FB8; |
| 66 | font-size: 14px; font-weight: 700; letter-spacing: 4px; |
| 67 | padding: 9px 22px; border-radius: 999px; margin-bottom: 32px; |
| 68 | box-shadow: 0 6px 20px rgba(216,197,232,0.4); |
| 69 | } |
| 70 | .kicker::before { content: "✦ "; color: #E8C896; } |
| 71 | h1 { |
| 72 | font-size: 140px; font-weight: 800; line-height: 1; |
| 73 | letter-spacing: 8px; color: #7A68A0; |
| 74 | text-shadow: 0 4px 20px rgba(216,197,232,0.6); |
| 75 | } |
| 76 | h1 .pink { color: #E8A8B8; } |
| 77 | .h-sub { |
| 78 | font-size: 38px; font-weight: 400; letter-spacing: 16px; |
| 79 | color: #9A8AB8; margin-top: 18px; opacity: 0.9; |
| 80 | } |
| 81 | .lead { |
| 82 | font-size: 19px; line-height: 1.9; color: #8A7AA0; |
| 83 | margin-top: 36px; max-width: 640px; margin-left: auto; margin-right: auto; |
| 84 | } |
| 85 | |
| 86 | /* bottom cards */ |
| 87 | .cards { |
| 88 | position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%); |
| 89 | display: flex; gap: 22px; z-index: 5; |
| 90 | } |
| 91 | .card { |
| 92 | background: rgba(255,255,255,0.75); |
| 93 | backdrop-filter: blur(8px); |
| 94 | border-radius: 28px; |
| 95 | padding: 22px 30px; text-align: center; |
| 96 | box-shadow: 0 12px 30px rgba(216,197,232,0.35); |
| 97 | border: 1px solid rgba(255,255,255,0.8); |
| 98 | min-width: 180px; |
| 99 | } |
| 100 | .card .icon { font-size: 32px; margin-bottom: 8px; } |
| 101 | .card .t { font-size: 18px; font-weight: 700; color: #7A68A0; letter-spacing: 2px; } |
| 102 | .card .d { font-size: 12px; color: #9A8AB8; margin-top: 6px; letter-spacing: 1px; } |
| 103 | </style> |
| 104 | </head> |
| 105 | <body> |
| 106 | <div class="stage"> |
| 107 | <div class="blob b1"></div> |
| 108 | <div class="blob b2"></div> |
| 109 | <div class="blob b3"></div> |
| 110 | |
| 111 | <div class="moon"></div> |
| 112 | <div class="cloud cl1"></div> |
| 113 | <div class="cloud cl2"></div> |
| 114 | |
| 115 | <div class="spark sp1">✦</div> |
| 116 | <div class="spark sp2">✧</div> |
| 117 | <div class="spark sp3">✦</div> |
| 118 | <div class="spark sp4">✧</div> |
| 119 | <div class="spark sp5">✦</div> |
| 120 | <div class="spark sp6">✧</div> |
| 121 | <div class="spark sp7">✦</div> |
| 122 | <div class="spark sp8">✧</div> |
| 123 | |
| 124 | <div class="content"> |
| 125 | <span class="kicker">DREAMY · 柔光童话</span> |
| 126 | <h1>星屑<br><span class="pink">柔光</span>调色盘</h1> |
| 127 | <div class="h-sub">让梦发光</div> |
| 128 | <p class="lead">把星星揉进颜料，把月亮磨成柔光。<br>每一种颜色，都是一颗会眨眼的糖。</p> |
| 129 | </div> |
| 130 | |
| 131 | <div class="cards"> |
| 132 | <div class="card"><div class="icon">🌙</div><div class="t">月夜</div><div class="d">MOONLIGHT</div></div> |
| 133 | <div class="card"><div class="icon">✨</div><div class="t">闪粉</div><div class="d">GLITTER</div></div> |
| 134 | <div class="card"><div class="icon">🦄</div><div class="t">独角兽</div><div class="d">UNICORN</div></div> |
| 135 | <div class="card"><div class="icon">🍭</div><div class="t">糖果</div><div class="d">CANDY</div></div> |
| 136 | </div> |
| 137 | </div> |
| 138 | </body> |
| 139 | </html> |
| 140 |