| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh-CN"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8" /> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| 6 | <title>孟菲斯波普 · Memphis Pop</title> |
| 7 | <style> |
| 8 | * { box-sizing: border-box; margin: 0; padding: 0; } |
| 9 | html, body { width: 100%; height: 100%; overflow: hidden; background: #0f1117; display: grid; place-items: center; } |
| 10 | body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; } |
| 11 | |
| 12 | .slide { |
| 13 | position: relative; |
| 14 | width: min(100vw, calc(100vh * 16 / 9)); |
| 15 | aspect-ratio: 16 / 9; |
| 16 | overflow: hidden; |
| 17 | background: #fef3c7; |
| 18 | box-shadow: 0 0 0 1px rgba(255,255,255,.08); |
| 19 | } |
| 20 | |
| 21 | .shape { position: absolute; z-index: 1; } |
| 22 | .s-tri-1 { |
| 23 | top: 6%; right: 8%; |
| 24 | width: 0; height: 0; |
| 25 | border-left: clamp(18px, 3vw, 40px) solid transparent; |
| 26 | border-right: clamp(18px, 3vw, 40px) solid transparent; |
| 27 | border-bottom: clamp(30px, 5vw, 65px) solid #f59e0b; |
| 28 | transform: rotate(15deg); |
| 29 | } |
| 30 | .s-tri-2 { |
| 31 | bottom: 12%; left: 5%; |
| 32 | width: 0; height: 0; |
| 33 | border-left: clamp(14px, 2.2vw, 30px) solid transparent; |
| 34 | border-right: clamp(14px, 2.2vw, 30px) solid transparent; |
| 35 | border-bottom: clamp(24px, 3.8vw, 50px) solid #8b5cf6; |
| 36 | transform: rotate(-20deg); |
| 37 | } |
| 38 | .s-circ-1 { |
| 39 | top: 14%; left: 42%; |
| 40 | width: clamp(20px, 3.2vw, 42px); height: clamp(20px, 3.2vw, 42px); |
| 41 | border-radius: 50%; background: #8b5cf6; opacity: 0.7; |
| 42 | } |
| 43 | .s-circ-2 { |
| 44 | bottom: 8%; right: 18%; |
| 45 | width: clamp(14px, 2vw, 28px); height: clamp(14px, 2vw, 28px); |
| 46 | border-radius: 50%; background: #f59e0b; opacity: 0.6; |
| 47 | } |
| 48 | .s-circ-3 { |
| 49 | top: 50%; right: 6%; |
| 50 | width: clamp(10px, 1.6vw, 22px); height: clamp(10px, 1.6vw, 22px); |
| 51 | border-radius: 50%; background: #0f172a; opacity: 0.25; |
| 52 | } |
| 53 | .s-squiggle { |
| 54 | top: 22%; left: 6%; |
| 55 | width: clamp(60px, 10vw, 130px); height: clamp(10px, 1.5vw, 20px); |
| 56 | border-top: 3px solid #8b5cf6; border-right: 3px solid #8b5cf6; |
| 57 | border-radius: 0 50% 0 0; opacity: 0.6; |
| 58 | } |
| 59 | .s-squiggle2 { |
| 60 | bottom: 20%; right: 8%; |
| 61 | width: clamp(40px, 7vw, 90px); height: clamp(8px, 1.2vw, 16px); |
| 62 | border-bottom: 3px solid #f59e0b; border-left: 3px solid #f59e0b; |
| 63 | border-radius: 0 0 0 50%; opacity: 0.6; |
| 64 | } |
| 65 | .s-rect { |
| 66 | top: 8%; left: 10%; |
| 67 | width: clamp(16px, 2.5vw, 34px); height: clamp(16px, 2.5vw, 34px); |
| 68 | background: #f59e0b; transform: rotate(30deg); opacity: 0.55; |
| 69 | } |
| 70 | .s-cross { |
| 71 | top: 65%; left: 50%; |
| 72 | width: clamp(20px, 3vw, 38px); height: clamp(20px, 3vw, 38px); |
| 73 | position: absolute; |
| 74 | } |
| 75 | .s-cross::before, .s-cross::after { |
| 76 | content: ''; position: absolute; background: #8b5cf6; opacity: 0.4; |
| 77 | } |
| 78 | .s-cross::before { |
| 79 | width: 100%; height: 3px; top: 50%; left: 0; transform: translateY(-50%); |
| 80 | } |
| 81 | .s-cross::after { |
| 82 | width: 3px; height: 100%; left: 50%; top: 0; transform: translateX(-50%); |
| 83 | } |
| 84 | |
| 85 | .zigzag { |
| 86 | position: absolute; top: 0; left: 0; right: 0; |
| 87 | height: clamp(8px, 1.2vw, 16px); z-index: 2; |
| 88 | background: repeating-linear-gradient(90deg, |
| 89 | #f59e0b 0px, #f59e0b clamp(6px, 1vw, 14px), |
| 90 | #8b5cf6 clamp(6px, 1vw, 14px), #8b5cf6 clamp(12px, 2vw, 28px) |
| 91 | ); |
| 92 | clip-path: polygon(0 100%, 5% 0, 10% 100%, 15% 0, 20% 100%, 25% 0, 30% 100%, 35% 0, 40% 100%, 45% 0, 50% 100%, 55% 0, 60% 100%, 65% 0, 70% 100%, 75% 0, 80% 100%, 85% 0, 90% 100%, 95% 0, 100% 100%); |
| 93 | } |
| 94 | .zigzag-bottom { |
| 95 | position: absolute; bottom: 0; left: 0; right: 0; |
| 96 | height: clamp(8px, 1.2vw, 16px); z-index: 2; |
| 97 | background: repeating-linear-gradient(90deg, |
| 98 | #8b5cf6 0px, #8b5cf6 clamp(6px, 1vw, 14px), |
| 99 | #f59e0b clamp(6px, 1vw, 14px), #f59e0b clamp(12px, 2vw, 28px) |
| 100 | ); |
| 101 | clip-path: polygon(0 0, 5% 100%, 10% 0, 15% 100%, 20% 0, 25% 100%, 30% 0, 35% 100%, 40% 0, 45% 100%, 50% 0, 55% 100%, 60% 0, 65% 100%, 70% 0, 75% 100%, 80% 0, 85% 100%, 90% 0, 95% 100%, 100% 0); |
| 102 | } |
| 103 | |
| 104 | .content { |
| 105 | position: absolute; |
| 106 | inset: clamp(20px, 3.5vw, 48px); |
| 107 | z-index: 3; |
| 108 | display: grid; |
| 109 | grid-template-columns: 1.1fr 0.9fr; |
| 110 | gap: clamp(12px, 2vw, 28px); |
| 111 | align-items: center; |
| 112 | } |
| 113 | .hero { display: flex; flex-direction: column; gap: clamp(6px, 1vw, 14px); } |
| 114 | .eyebrow { |
| 115 | font-size: clamp(6px, 0.8vw, 10px); |
| 116 | font-weight: 800; letter-spacing: 0.18em; |
| 117 | text-transform: uppercase; color: #8b5cf6; |
| 118 | } |
| 119 | h1 { |
| 120 | font-size: clamp(26px, 4.8vw, 56px); |
| 121 | line-height: 0.95; font-weight: 900; color: #0f172a; |
| 122 | } |
| 123 | .desc { |
| 124 | font-size: clamp(8px, 1.1vw, 14px); |
| 125 | line-height: 1.6; color: #374151; max-width: 90%; |
| 126 | } |
| 127 | .tags { display: flex; flex-wrap: wrap; gap: clamp(3px, 0.4vw, 6px); } |
| 128 | .tags span { |
| 129 | font-size: clamp(6px, 0.7vw, 9px); font-weight: 700; |
| 130 | padding: clamp(2px, 0.3vw, 4px) clamp(5px, 0.6vw, 8px); |
| 131 | background: #0f172a; color: #fef3c7; |
| 132 | } |
| 133 | .info-card { |
| 134 | background: rgba(255,255,255,0.85); |
| 135 | border: 3px solid #0f172a; |
| 136 | padding: clamp(10px, 1.6vw, 22px); |
| 137 | box-shadow: clamp(4px, 0.6vw, 8px) clamp(4px, 0.6vw, 8px) 0 #8b5cf6; |
| 138 | } |
| 139 | .card-label { |
| 140 | font-size: clamp(7px, 0.85vw, 11px); font-weight: 900; |
| 141 | letter-spacing: 0.12em; text-transform: uppercase; |
| 142 | color: #f59e0b; margin-bottom: clamp(4px, 0.6vw, 8px); |
| 143 | } |
| 144 | .card-text { |
| 145 | font-size: clamp(7px, 0.9vw, 12px); line-height: 1.55; color: #374151; |
| 146 | } |
| 147 | .palette { display: flex; gap: clamp(4px, 0.5vw, 8px); margin-top: clamp(6px, 1vw, 14px); } |
| 148 | .palette i { |
| 149 | display: block; width: clamp(14px, 2vw, 26px); height: clamp(14px, 2vw, 26px); |
| 150 | border-radius: 50%; background: var(--c); border: 2px solid #0f172a; |
| 151 | } |
| 152 | .transition-note { |
| 153 | font-size: clamp(6px, 0.7vw, 9px); |
| 154 | color: #374151; opacity: 0.6; margin-top: clamp(4px, 0.5vw, 8px); |
| 155 | } |
| 156 | |
| 157 | @media (max-aspect-ratio: 16/9) { .slide { width: min(100vw, calc(100vh * 16 / 9)); height: auto; } } |
| 158 | @media (min-aspect-ratio: 16/9) { .slide { height: min(100vh, calc(100vw * 9 / 16)); width: auto; } } |
| 159 | </style> |
| 160 | </head> |
| 161 | <body> |
| 162 | <main class="slide" aria-label="孟菲斯波普 style preview"> |
| 163 | <div class="zigzag"></div> |
| 164 | <div class="shape s-tri-1"></div> |
| 165 | <div class="shape s-tri-2"></div> |
| 166 | <div class="shape s-circ-1"></div> |
| 167 | <div class="shape s-circ-2"></div> |
| 168 | <div class="shape s-circ-3"></div> |
| 169 | <div class="shape s-squiggle"></div> |
| 170 | <div class="shape s-squiggle2"></div> |
| 171 | <div class="shape s-rect"></div> |
| 172 | <div class="shape s-cross"></div> |
| 173 | <section class="content"> |
| 174 | <div class="hero"> |
| 175 | <div class="eyebrow">大胆 · 宣言 · memphis-pop</div> |
| 176 | <h1>孟菲斯波普</h1> |
| 177 | <p class="desc">霓虹渐变洒满画布，孟菲斯派对永不散场</p> |
| 178 | <div class="tags"><span>年轻品牌发布</span><span>潮流合作</span><span>创意工作坊</span><span>毕业展示</span></div> |
| 179 | <p class="transition-note">zoom-pop / stagger-list / shimmer-sweep</p> |
| 180 | </div> |
| 181 | <div class="info-card"> |
| 182 | <div class="card-label">Style DNA</div> |
| 183 | <p class="card-text">孟菲斯波普风格是一场色彩与几何的狂欢派对。粗犷无衬线字体，大字重，标题字号可以夸张到让排版本身成为装饰。不对称布局中穿插圆点、三角、锯齿线条。</p> |
| 184 | <div class="palette"> |
| 185 | <i style="--c:#0f172a"></i> |
| 186 | <i style="--c:#374151"></i> |
| 187 | <i style="--c:#f59e0b"></i> |
| 188 | <i style="--c:#8b5cf6"></i> |
| 189 | <i style="--c:#fef3c7"></i> |
| 190 | </div> |
| 191 | </div> |
| 192 | </section> |
| 193 | <div class="zigzag-bottom"></div> |
| 194 | </main> |
| 195 | </body> |
| 196 | </html> |