| 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","STSong","SimSun",serif; } |
| 9 | .canvas { |
| 10 | width: 1600px; height: 900px; position: relative; color: #333333; |
| 11 | background: |
| 12 | radial-gradient(ellipse at 70% 30%, rgba(245,191,200,0.28) 0%, transparent 55%), |
| 13 | radial-gradient(ellipse at 25% 75%, rgba(232,220,200,0.3) 0%, transparent 55%), |
| 14 | linear-gradient(135deg, #FAF7F0 0%, #F5F2E9 100%); |
| 15 | } |
| 16 | |
| 17 | /* 顶栏 */ |
| 18 | .topbar { |
| 19 | position: absolute; top: 0; left: 0; width: 100%; height: 8px; |
| 20 | background: linear-gradient(90deg, #F5F2E9 0%, #F5BFC8 50%, #F091A0 100%); |
| 21 | } |
| 22 | |
| 23 | /* 品牌 */ |
| 24 | .brand { |
| 25 | position: absolute; top: 70px; left: 140px; |
| 26 | font-size: 18px; color: #666666; letter-spacing: 6px; |
| 27 | font-family:"Helvetica Neue",sans-serif; |
| 28 | } |
| 29 | .brand::before { content:""; display:inline-block; width:24px; height:2px; background:#B23A48; vertical-align:middle; margin-right:12px; } |
| 30 | |
| 31 | /* 主标题居中 */ |
| 32 | .title-wrap { |
| 33 | position: absolute; top: 150px; left: 140px; |
| 34 | } |
| 35 | .main-title { |
| 36 | font-size: 96px; font-weight: 800; color: #333333; |
| 37 | letter-spacing: 14px; line-height: 1.15; |
| 38 | } |
| 39 | .main-title .rose { color: #F091A0; } |
| 40 | .sub-title { |
| 41 | font-size: 26px; color: #666666; letter-spacing: 10px; |
| 42 | margin-top: 24px; |
| 43 | } |
| 44 | .sub-title .pipe { color: #B23A48; margin: 0 10px; } |
| 45 | |
| 46 | /* 色名双卡 */ |
| 47 | .duo { |
| 48 | position: absolute; top: 410px; left: 140px; |
| 49 | display: flex; gap: 36px; |
| 50 | } |
| 51 | .duo-card { |
| 52 | width: 280px; padding: 36px 32px; text-align: center; |
| 53 | } |
| 54 | .dc1 { background: #F5F2E9; border: 1px solid #E8DCC8; } |
| 55 | .dc2 { background: #F091A0; color: #FAF7F0; } |
| 56 | .duo-card .swatch-name { |
| 57 | font-size: 56px; font-weight: 800; letter-spacing: 8px; |
| 58 | font-family:"STKaiti","KaiTi",serif; line-height: 1.1; |
| 59 | } |
| 60 | .duo-card .pinyin { |
| 61 | font-size: 16px; letter-spacing: 4px; margin-top: 10px; |
| 62 | font-family:"Helvetica Neue",sans-serif; opacity: 0.7; |
| 63 | } |
| 64 | .duo-card .meaning { |
| 65 | font-size: 16px; margin-top: 18px; line-height: 1.7; letter-spacing: 1px; |
| 66 | } |
| 67 | .duo-card .hex { |
| 68 | font-size: 18px; margin-top: 22px; padding-top: 16px; |
| 69 | border-top: 1px solid currentColor; opacity: 0.6; |
| 70 | font-family:"Helvetica Neue",sans-serif; letter-spacing: 2px; |
| 71 | } |
| 72 | |
| 73 | /* 右侧瓷器 */ |
| 74 | .vase { position: absolute; right: 140px; top: 180px; } |
| 75 | |
| 76 | /* 印章 */ |
| 77 | .seal { |
| 78 | position: absolute; bottom: 180px; right: 200px; |
| 79 | width: 64px; height: 64px; background: #B23A48; |
| 80 | display:flex; align-items:center; justify-content:center; |
| 81 | color:#FAF7F0; font-size:16px; font-weight:bold; |
| 82 | text-align:center; line-height:1.1; letter-spacing:1px; |
| 83 | font-family:"STKaiti",serif; |
| 84 | } |
| 85 | |
| 86 | /* 底部 */ |
| 87 | .footer { |
| 88 | position: absolute; left: 140px; right: 140px; bottom: 60px; |
| 89 | display:flex; justify-content:space-between; align-items:center; |
| 90 | padding-top: 22px; border-top: 1px solid rgba(102,102,102,0.2); |
| 91 | } |
| 92 | .footer .l { font-size: 18px; color: #666666; letter-spacing: 4px; } |
| 93 | .footer .r { font-size: 16px; color: #666666; letter-spacing: 3px; font-family:"Helvetica Neue",sans-serif; } |
| 94 | </style> |
| 95 | </head> |
| 96 | <body> |
| 97 | <div class="canvas"> |
| 98 | <div class="topbar"></div> |
| 99 | |
| 100 | <div class="brand">ACD · CHINESE TRADITIONAL COLOR</div> |
| 101 | |
| 102 | <div class="title-wrap"> |
| 103 | <div class="main-title">凝脂<span class="rose">杨妃</span></div> |
| 104 | <div class="sub-title">中国传统色 <span class="pipe">·</span> 瓷韵典雅</div> |
| 105 | </div> |
| 106 | |
| 107 | <div class="duo"> |
| 108 | <div class="duo-card dc1"> |
| 109 | <div class="swatch-name">凝脂</div> |
| 110 | <div class="pinyin">NÍNG ZHĪ</div> |
| 111 | <div class="meaning">温润如玉<br>凝结的脂膏之白</div> |
| 112 | <div class="hex">#F5F2E9</div> |
| 113 | </div> |
| 114 | <div class="duo-card dc2"> |
| 115 | <div class="swatch-name">杨妃</div> |
| 116 | <div class="pinyin">YÁNG FĒI</div> |
| 117 | <div class="meaning">沉静玫瑰<br>取自盛唐贵妃之色</div> |
| 118 | <div class="hex">#F091A0</div> |
| 119 | </div> |
| 120 | </div> |
| 121 | |
| 122 | <!-- 瓷器 SVG --> |
| 123 | <svg class="vase" width="280" height="420" viewBox="0 0 280 420"> |
| 124 | <defs> |
| 125 | <linearGradient id="vaseG" x1="0" y1="0" x2="1" y2="0"> |
| 126 | <stop offset="0%" stop-color="#F5F2E9"/> |
| 127 | <stop offset="40%" stop-color="#FAF7F0"/> |
| 128 | <stop offset="100%" stop-color="#E8DCC8"/> |
| 129 | </linearGradient> |
| 130 | <linearGradient id="vaseRose" x1="0" y1="0" x2="0" y2="1"> |
| 131 | <stop offset="0%" stop-color="#F5BFC8"/> |
| 132 | <stop offset="100%" stop-color="#F091A0"/> |
| 133 | </linearGradient> |
| 134 | </defs> |
| 135 | <!-- 瓶身 --> |
| 136 | <path d="M100,40 Q120,40 120,70 Q120,90 140,110 Q200,150 210,240 Q220,330 180,380 Q140,400 100,380 Q60,330 70,240 Q80,150 140,110 Q160,90 160,70 Q160,40 180,40 Z" |
| 137 | fill="url(#vaseG)" stroke="#B23A48" stroke-width="1.5"/> |
| 138 | <!-- 缠枝纹 --> |
| 139 | <path d="M90,250 Q120,230 140,260 Q160,290 190,270" stroke="#F091A0" stroke-width="2.5" fill="none" opacity="0.8"/> |
| 140 | <circle cx="115" cy="245" r="6" fill="#F091A0" opacity="0.85"/> |
| 141 | <circle cx="165" cy="275" r="6" fill="#F091A0" opacity="0.85"/> |
| 142 | <ellipse cx="140" cy="258" rx="8" ry="5" fill="#F5BFC8" opacity="0.8"/> |
| 143 | <!-- 底部花纹 --> |
| 144 | <path d="M85,340 L195,340" stroke="#B23A48" stroke-width="1.5" opacity="0.6"/> |
| 145 | <path d="M85,355 L195,355" stroke="#B23A48" stroke-width="1" opacity="0.5"/> |
| 146 | <!-- 瓶口 --> |
| 147 | <ellipse cx="140" cy="40" rx="40" ry="8" fill="#E8DCC8" stroke="#B23A48" stroke-width="1.5"/> |
| 148 | </svg> |
| 149 | |
| 150 | <div class="seal">瓷韵<br>典雅</div> |
| 151 | |
| 152 | <div class="footer"> |
| 153 | <div class="l">凝脂 · 杨妃 <span style="color:#B23A48">●</span> 双色协奏</div> |
| 154 | <div class="r">PORCELAIN ROSE · VOL. 06</div> |
| 155 | </div> |
| 156 | </div> |
| 157 | </body> |
| 158 | </html> |
| 159 |