| 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; background: #F5F5DC; font-family: "Songti SC", "STSong", "SimSun", serif; } |
| 9 | |
| 10 | .canvas { |
| 11 | width: 1600px; height: 900px; |
| 12 | background: |
| 13 | radial-gradient(ellipse at 20% 30%, rgba(169,169,169,0.08) 0%, transparent 50%), |
| 14 | radial-gradient(ellipse at 80% 70%, rgba(107,142,107,0.06) 0%, transparent 50%), |
| 15 | linear-gradient(180deg, #FAF7F0 0%, #F5F5DC 100%); |
| 16 | position: relative; color: #1A1A1A; |
| 17 | } |
| 18 | |
| 19 | /* 远山 */ |
| 20 | .mountain { |
| 21 | position: absolute; bottom: 0; width: 100%; height: 360px; opacity: 0.55; |
| 22 | } |
| 23 | .m1 { fill: #A9A9A9; opacity: 0.35; } |
| 24 | .m2 { fill: #696969; opacity: 0.45; } |
| 25 | .m3 { fill: #1A1A1A; opacity: 0.7; } |
| 26 | |
| 27 | /* 柳条 */ |
| 28 | .willow { position: absolute; top: 0; left: 60px; } |
| 29 | |
| 30 | /* 印章 */ |
| 31 | .seal { |
| 32 | position: absolute; top: 80px; right: 110px; |
| 33 | width: 78px; height: 78px; background: #DC143C; |
| 34 | display: flex; align-items: center; justify-content: center; |
| 35 | color: #FAF7F0; font-size: 22px; font-weight: bold; |
| 36 | letter-spacing: 2px; line-height: 1.1; text-align: center; |
| 37 | box-shadow: 0 0 0 3px #DC143C inset; |
| 38 | font-family: "STKaiti", "KaiTi", serif; |
| 39 | } |
| 40 | |
| 41 | /* 主标题区 */ |
| 42 | .title-block { |
| 43 | position: absolute; top: 200px; left: 140px; |
| 44 | z-index: 5; |
| 45 | } |
| 46 | .vert-label { |
| 47 | writing-mode: vertical-rl; |
| 48 | font-size: 28px; color: #696969; |
| 49 | letter-spacing: 8px; position: absolute; |
| 50 | left: -50px; top: 10px; |
| 51 | } |
| 52 | .main-title { |
| 53 | font-family: "STKaiti", "KaiTi", "Songti SC", serif; |
| 54 | font-size: 132px; font-weight: 900; |
| 55 | color: #000000; letter-spacing: 24px; |
| 56 | line-height: 1.1; text-shadow: 2px 2px 0 rgba(0,0,0,0.08); |
| 57 | } |
| 58 | .sub-title { |
| 59 | font-size: 30px; color: #6B8E6B; letter-spacing: 12px; |
| 60 | margin-top: 30px; font-weight: 300; |
| 61 | } |
| 62 | .ink-line { |
| 63 | width: 220px; height: 6px; margin-top: 36px; |
| 64 | background: linear-gradient(90deg, #000000 0%, transparent 100%); |
| 65 | } |
| 66 | |
| 67 | /* 副文 */ |
| 68 | .body-text { |
| 69 | position: absolute; left: 140px; bottom: 130px; |
| 70 | width: 480px; font-size: 22px; line-height: 2; |
| 71 | color: #1A1A1A; letter-spacing: 3px; |
| 72 | } |
| 73 | .body-text span { color: #DC143C; font-weight: bold; } |
| 74 | |
| 75 | /* 右侧卡片 */ |
| 76 | .card { |
| 77 | position: absolute; top: 230px; right: 140px; |
| 78 | width: 340px; padding: 40px 36px; |
| 79 | background: rgba(250,247,240,0.7); |
| 80 | border: 1px solid rgba(26,26,26,0.15); |
| 81 | backdrop-filter: blur(2px); |
| 82 | } |
| 83 | .card-title { |
| 84 | font-size: 28px; color: #000000; letter-spacing: 6px; |
| 85 | margin-bottom: 28px; border-left: 4px solid #DC143C; |
| 86 | padding-left: 16px; |
| 87 | } |
| 88 | .card-item { |
| 89 | display: flex; justify-content: space-between; |
| 90 | padding: 14px 0; border-bottom: 1px dashed rgba(0,0,0,0.15); |
| 91 | font-size: 20px; |
| 92 | } |
| 93 | .card-item .k { color: #696969; letter-spacing: 2px; } |
| 94 | .card-item .v { color: #1A1A1A; font-weight: 600; } |
| 95 | |
| 96 | /* 底部诗句 */ |
| 97 | .verse { |
| 98 | position: absolute; right: 140px; bottom: 90px; |
| 99 | font-size: 22px; color: #696969; letter-spacing: 6px; |
| 100 | writing-mode: vertical-rl; line-height: 2; |
| 101 | } |
| 102 | |
| 103 | /* 乌篷船 */ |
| 104 | .boat { position: absolute; bottom: 60px; left: 820px; opacity: 0.75; } |
| 105 | </style> |
| 106 | </head> |
| 107 | <body> |
| 108 | <div class="canvas"> |
| 109 | <!-- 柳条 --> |
| 110 | <svg class="willow" width="200" height="500" viewBox="0 0 200 500"> |
| 111 | <path d="M30,0 Q40,100 25,250 Q15,400 35,500" stroke="#6B8E6B" stroke-width="2" fill="none" opacity="0.6"/> |
| 112 | <path d="M60,0 Q70,120 55,280 Q45,420 65,500" stroke="#8FBC8F" stroke-width="2" fill="none" opacity="0.5"/> |
| 113 | <path d="M90,0 Q80,100 95,260 Q105,400 85,500" stroke="#6B8E6B" stroke-width="2" fill="none" opacity="0.55"/> |
| 114 | <ellipse cx="22" cy="180" rx="4" ry="10" fill="#8FBC8F" opacity="0.6" transform="rotate(20 22 180)"/> |
| 115 | <ellipse cx="58" cy="220" rx="4" ry="10" fill="#8FBC8F" opacity="0.5" transform="rotate(-15 58 220)"/> |
| 116 | <ellipse cx="98" cy="300" rx="4" ry="10" fill="#6B8E6B" opacity="0.6" transform="rotate(25 98 300)"/> |
| 117 | </svg> |
| 118 | |
| 119 | <!-- 远山三层 --> |
| 120 | <svg class="mountain" viewBox="0 0 1600 360" preserveAspectRatio="none"> |
| 121 | <path class="m1" d="M0,360 L0,200 Q200,120 400,180 Q600,240 800,150 Q1000,80 1200,170 Q1400,240 1600,160 L1600,360 Z"/> |
| 122 | <path class="m2" d="M0,360 L0,260 Q300,200 500,250 Q700,300 900,220 Q1100,160 1300,240 Q1500,300 1600,250 L1600,360 Z"/> |
| 123 | <path class="m3" d="M0,360 L0,310 Q200,280 400,300 Q600,320 800,290 Q1000,260 1200,300 Q1400,330 1600,300 L1600,360 Z"/> |
| 124 | </svg> |
| 125 | |
| 126 | <!-- 乌篷船 --> |
| 127 | <svg class="boat" width="160" height="70" viewBox="0 0 160 70"> |
| 128 | <path d="M10,50 Q80,70 150,50 L140,40 Q80,55 20,40 Z" fill="#1A1A1A" opacity="0.85"/> |
| 129 | <path d="M40,40 Q80,15 120,40" stroke="#1A1A1A" stroke-width="3" fill="none" opacity="0.7"/> |
| 130 | <line x1="80" y1="20" x2="80" y2="42" stroke="#1A1A1A" stroke-width="2"/> |
| 131 | </svg> |
| 132 | |
| 133 | <!-- 印章 --> |
| 134 | <div class="seal">江南<br>水墨</div> |
| 135 | |
| 136 | <!-- 标题 --> |
| 137 | <div class="title-block"> |
| 138 | <div class="vert-label">烟雨如墨</div> |
| 139 | <div class="main-title">水墨江南</div> |
| 140 | <div class="sub-title">一纸烟雨 · 半卷流年</div> |
| 141 | <div class="ink-line"></div> |
| 142 | </div> |
| 143 | |
| 144 | <!-- 正文 --> |
| 145 | <div class="body-text"> |
| 146 | 青砖黛瓦之间，乌篷船摇过千年时光。<br> |
| 147 | 以墨为骨，以水为韵，于<span>留白</span>处见天地。<br> |
| 148 | 让每一帧画面，都成一首未完的诗。 |
| 149 | </div> |
| 150 | |
| 151 | <!-- 右侧卡片 --> |
| 152 | <div class="card"> |
| 153 | <div class="card-title">意境构成</div> |
| 154 | <div class="card-item"><span class="k">主 色</span><span class="v">浓墨 · 留白</span></div> |
| 155 | <div class="card-item"><span class="k">点 缀</span><span class="v">朱砂红</span></div> |
| 156 | <div class="card-item"><span class="k">字 体</span><span class="v">楷书 · 仿宋</span></div> |
| 157 | <div class="card-item"><span class="k">气 韵</span><span class="v">宁静悠远</span></div> |
| 158 | </div> |
| 159 | |
| 160 | <!-- 竖排诗句 --> |
| 161 | <div class="verse">春风又绿江南岸</div> |
| 162 | </div> |
| 163 | </body> |
| 164 | </html> |
| 165 |