| 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: #2C3E50; |
| 11 | background: |
| 12 | radial-gradient(ellipse at 30% 20%, rgba(244,241,234,0.9) 0%, transparent 60%), |
| 13 | linear-gradient(180deg, #F4F1EA 0%, #EDE7DA 60%, #D4C4A0 100%); |
| 14 | } |
| 15 | |
| 16 | /* 山峦层叠 */ |
| 17 | .hills { position: absolute; bottom: 0; left: 0; width: 100%; height: 560px; } |
| 18 | |
| 19 | /* 云雾圆 */ |
| 20 | .mist { |
| 21 | position: absolute; top: 200px; left: 200px; |
| 22 | width: 360px; height: 80px; border-radius: 50%; |
| 23 | background: radial-gradient(ellipse, rgba(244,241,234,0.85) 0%, transparent 70%); |
| 24 | filter: blur(8px); |
| 25 | } |
| 26 | .mist2 { top: 420px; left: 700px; width: 420px; height: 70px; } |
| 27 | |
| 28 | /* 印章 */ |
| 29 | .seal { |
| 30 | position: absolute; top: 80px; right: 140px; |
| 31 | width: 72px; height: 72px; background: #A93226; |
| 32 | display:flex; align-items:center; justify-content:center; |
| 33 | color:#F4F1EA; font-size:18px; font-weight:bold; |
| 34 | text-align:center; line-height:1.1; letter-spacing:1px; |
| 35 | font-family:"STKaiti",serif; |
| 36 | } |
| 37 | |
| 38 | /* 标签 */ |
| 39 | .tag { |
| 40 | position: absolute; top: 95px; left: 140px; |
| 41 | font-size: 16px; color: #5D6D7E; letter-spacing: 6px; |
| 42 | font-family:"Helvetica Neue",sans-serif; |
| 43 | } |
| 44 | .tag::before { content:""; display:inline-block; width:26px; height:2px; background:#A93226; vertical-align:middle; margin-right:12px; } |
| 45 | |
| 46 | /* 标题 */ |
| 47 | .title { position: absolute; top: 170px; left: 140px; z-index:5; } |
| 48 | .main-title { |
| 49 | font-size: 124px; font-weight: 800; color: #2C3E50; |
| 50 | letter-spacing: 20px; line-height: 1.05; |
| 51 | } |
| 52 | .main-title .blue { color: #4A90A4; } |
| 53 | .sub-title { |
| 54 | font-size: 28px; color: #5D6D7E; letter-spacing: 12px; |
| 55 | margin-top: 28px; font-family:"STKaiti",serif; |
| 56 | } |
| 57 | .sub-title .em { color: #A93226; } |
| 58 | |
| 59 | /* 正文 */ |
| 60 | .body { |
| 61 | position: absolute; left: 140px; bottom: 200px; |
| 62 | width: 480px; font-size: 22px; line-height: 2.1; |
| 63 | color: #2C3E50; letter-spacing: 2px; z-index:5; |
| 64 | } |
| 65 | .body strong { color: #4A90A4; font-weight: 600; } |
| 66 | |
| 67 | /* 右侧竖排 */ |
| 68 | .vert { |
| 69 | position: absolute; right: 220px; top: 220px; |
| 70 | writing-mode: vertical-rl; font-family:"STKaiti",serif; |
| 71 | font-size: 32px; color: #5D6D7E; letter-spacing: 16px; |
| 72 | line-height: 2.2; z-index:5; |
| 73 | } |
| 74 | .vert .red { color: #A93226; } |
| 75 | |
| 76 | /* 色卡 */ |
| 77 | .palette { |
| 78 | position: absolute; right: 140px; bottom: 90px; |
| 79 | display:flex; gap: 14px; z-index:5; |
| 80 | } |
| 81 | .ps { width: 80px; height: 80px; display:flex; align-items:flex-end; justify-content:center; |
| 82 | padding-bottom: 8px; color:#FFF; font-size:12px; font-family:"Helvetica Neue",sans-serif; letter-spacing:1px;} |
| 83 | .ps1 { background: #4A90A4; } |
| 84 | .ps2 { background: #8B9DC3; } |
| 85 | .ps3 { background: #D4C4A0; color:#2C3E50; } |
| 86 | .ps4 { background: #2C3E50; } |
| 87 | |
| 88 | /* 飞鸟 */ |
| 89 | .bird { position: absolute; } |
| 90 | .b1 { top: 280px; left: 760px; } |
| 91 | .b2 { top: 320px; left: 840px; } |
| 92 | </style> |
| 93 | </head> |
| 94 | <body> |
| 95 | <div class="canvas"> |
| 96 | <div class="mist"></div> |
| 97 | <div class="mist mist2"></div> |
| 98 | |
| 99 | <!-- 山峦 --> |
| 100 | <svg class="hills" viewBox="0 0 1600 560" preserveAspectRatio="none"> |
| 101 | <path d="M0,560 L0,300 Q200,200 400,260 Q600,320 800,220 Q1000,140 1200,240 Q1400,320 1600,260 L1600,560 Z" fill="#8B9DC3" opacity="0.35"/> |
| 102 | <path d="M0,560 L0,380 Q250,300 500,360 Q700,410 900,320 Q1100,250 1300,340 Q1500,400 1600,360 L1600,560 Z" fill="#4A90A4" opacity="0.45"/> |
| 103 | <path d="M0,560 L0,460 Q300,400 600,450 Q900,500 1200,430 Q1400,390 1600,440 L1600,560 Z" fill="#2C3E50" opacity="0.55"/> |
| 104 | <path d="M0,560 L0,520 Q400,500 800,520 Q1200,540 1600,510 L1600,560 Z" fill="#D4C4A0" opacity="0.6"/> |
| 105 | </svg> |
| 106 | |
| 107 | <!-- 飞鸟 --> |
| 108 | <svg class="bird b1" width="30" height="14" viewBox="0 0 30 14"><path d="M2,12 Q8,4 15,10 Q22,4 28,12" stroke="#2C3E50" stroke-width="1.5" fill="none"/></svg> |
| 109 | <svg class="bird b2" width="24" height="12" viewBox="0 0 24 12"><path d="M2,10 Q7,3 12,8 Q17,3 22,10" stroke="#2C3E50" stroke-width="1.5" fill="none"/></svg> |
| 110 | |
| 111 | <div class="seal">山水<br>之境</div> |
| 112 | <div class="tag">CHINESE INK LANDSCAPE · 山水之境</div> |
| 113 | |
| 114 | <div class="title"> |
| 115 | <div class="main-title">山水<span class="blue">之</span>境</div> |
| 116 | <div class="sub-title">层峦叠嶂 <span class="em">·</span> 云雾深处见天地</div> |
| 117 | </div> |
| 118 | |
| 119 | <div class="body"> |
| 120 | 青灰山色隐于<strong>云雾</strong>，暖沙米色铺陈大地。<br> |
| 121 | 一笔写意，半卷留白，<br> |
| 122 | 于山水之间，照见内心的<strong>澄明</strong>。 |
| 123 | </div> |
| 124 | |
| 125 | <div class="vert">会当凌绝顶<br><span class="red">一览众山小</span></div> |
| 126 | |
| 127 | <div class="palette"> |
| 128 | <div class="ps ps1">#4A90A4</div> |
| 129 | <div class="ps ps2">#8B9DC3</div> |
| 130 | <div class="ps ps3">#D4C4A0</div> |
| 131 | <div class="ps ps4">#2C3E50</div> |
| 132 | </div> |
| 133 | </div> |
| 134 | </body> |
| 135 | </html> |
| 136 |