| 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: #1B1B1B; |
| 11 | background: |
| 12 | radial-gradient(ellipse at 75% 35%, rgba(227,242,253,0.7) 0%, transparent 55%), |
| 13 | radial-gradient(ellipse at 20% 80%, rgba(232,245,233,0.6) 0%, transparent 50%), |
| 14 | linear-gradient(180deg, #F5F5F5 0%, #FAFAFA 100%); |
| 15 | } |
| 16 | |
| 17 | /* 月亮 */ |
| 18 | .moon { |
| 19 | position: absolute; top: 130px; right: 280px; |
| 20 | width: 200px; height: 200px; border-radius: 50%; |
| 21 | background: radial-gradient(circle at 35% 35%, #FFFFFF 0%, #E3F2FD 60%, #B2DFDB 100%); |
| 22 | box-shadow: 0 0 60px rgba(178,223,219,0.6), 0 0 120px rgba(227,242,253,0.5); |
| 23 | opacity: 0.85; |
| 24 | } |
| 25 | |
| 26 | /* 竹林 */ |
| 27 | .bamboo { position: absolute; right: 60px; top: 0; height: 900px; opacity: 0.5; } |
| 28 | |
| 29 | /* 飘落竹叶 */ |
| 30 | .leaf { |
| 31 | position: absolute; width: 14px; height: 36px; |
| 32 | background: #4A7C59; border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%; |
| 33 | opacity: 0.7; |
| 34 | } |
| 35 | .l1 { top: 180px; left: 480px; transform: rotate(35deg); } |
| 36 | .l2 { top: 540px; left: 380px; transform: rotate(-20deg); background: #2E7D32; } |
| 37 | .l3 { top: 720px; left: 900px; transform: rotate(60deg); background: #6B8E6B; } |
| 38 | |
| 39 | /* 印章 */ |
| 40 | .seal { |
| 41 | position: absolute; top: 90px; left: 130px; |
| 42 | width: 70px; height: 70px; background: #D32F2F; |
| 43 | display: flex; align-items: center; justify-content: center; |
| 44 | color: #FAFAFA; font-size: 20px; font-weight: bold; |
| 45 | line-height: 1.1; letter-spacing: 1px; text-align: center; |
| 46 | font-family: "STKaiti","KaiTi",serif; |
| 47 | } |
| 48 | |
| 49 | /* 标题区 */ |
| 50 | .title { |
| 51 | position: absolute; top: 260px; left: 200px; z-index: 5; |
| 52 | } |
| 53 | .en-tag { |
| 54 | font-size: 18px; color: #5D6D7E; letter-spacing: 6px; |
| 55 | text-transform: uppercase; margin-bottom: 24px; |
| 56 | font-family: "Helvetica Neue", sans-serif; |
| 57 | } |
| 58 | .main-title { |
| 59 | font-family: "STKaiti","KaiTi","Songti SC",serif; |
| 60 | font-size: 110px; color: #1B1B1B; font-weight: 800; |
| 61 | letter-spacing: 18px; line-height: 1.1; |
| 62 | } |
| 63 | .main-title .accent { color: #2E7D32; } |
| 64 | .poem { |
| 65 | font-size: 26px; color: #5D6D7E; letter-spacing: 10px; |
| 66 | margin-top: 30px; line-height: 1.8; |
| 67 | } |
| 68 | .ink-dot { |
| 69 | display: inline-block; width: 10px; height: 10px; |
| 70 | background: #D32F2F; border-radius: 50%; |
| 71 | margin: 0 12px; vertical-align: middle; |
| 72 | } |
| 73 | |
| 74 | /* 左下正文 */ |
| 75 | .body { |
| 76 | position: absolute; left: 200px; bottom: 110px; |
| 77 | width: 440px; font-size: 20px; line-height: 2.1; |
| 78 | color: #1B1B1B; letter-spacing: 2px; |
| 79 | } |
| 80 | .body strong { color: #2E7D32; font-weight: 600; } |
| 81 | |
| 82 | /* 右侧竖排诗 */ |
| 83 | .vert-poem { |
| 84 | position: absolute; right: 200px; top: 200px; |
| 85 | writing-mode: vertical-rl; font-family: "STKaiti",serif; |
| 86 | font-size: 30px; color: #5D6D7E; letter-spacing: 14px; |
| 87 | line-height: 2.2; z-index: 4; |
| 88 | } |
| 89 | .vert-poem .red { color: #D32F2F; } |
| 90 | |
| 91 | /* 底部细线 */ |
| 92 | .baseline { |
| 93 | position: absolute; left: 200px; right: 200px; bottom: 80px; |
| 94 | height: 1px; background: linear-gradient(90deg, transparent, #5D6D7E 30%, #5D6D7E 70%, transparent); |
| 95 | opacity: 0.4; |
| 96 | } |
| 97 | .meta { |
| 98 | position: absolute; left: 200px; bottom: 45px; |
| 99 | font-size: 16px; color: #5D6D7E; letter-spacing: 4px; |
| 100 | font-family: "Helvetica Neue",sans-serif; |
| 101 | } |
| 102 | .meta-r { |
| 103 | position: absolute; right: 200px; bottom: 45px; |
| 104 | font-size: 16px; color: #5D6D7E; letter-spacing: 4px; |
| 105 | font-family: "Helvetica Neue",sans-serif; |
| 106 | } |
| 107 | </style> |
| 108 | </head> |
| 109 | <body> |
| 110 | <div class="canvas"> |
| 111 | <!-- 月 --> |
| 112 | <div class="moon"></div> |
| 113 | |
| 114 | <!-- 竹林剪影 --> |
| 115 | <svg class="bamboo" viewBox="0 0 400 900" preserveAspectRatio="none"> |
| 116 | <line x1="60" y1="0" x2="80" y2="900" stroke="#4A7C59" stroke-width="6" opacity="0.5"/> |
| 117 | <line x1="160" y1="0" x2="150" y2="900" stroke="#2E7D32" stroke-width="5" opacity="0.55"/> |
| 118 | <line x1="260" y1="0" x2="280" y2="900" stroke="#4A7C59" stroke-width="7" opacity="0.45"/> |
| 119 | <line x1="350" y1="0" x2="340" y2="900" stroke="#6B8E6B" stroke-width="4" opacity="0.5"/> |
| 120 | <!-- 竹节 --> |
| 121 | <ellipse cx="70" cy="180" rx="6" ry="3" fill="#2E7D32" opacity="0.6"/> |
| 122 | <ellipse cx="75" cy="400" rx="6" ry="3" fill="#2E7D32" opacity="0.6"/> |
| 123 | <ellipse cx="80" cy="620" rx="6" ry="3" fill="#2E7D32" opacity="0.6"/> |
| 124 | <ellipse cx="155" cy="250" rx="5" ry="3" fill="#2E7D32" opacity="0.6"/> |
| 125 | <ellipse cx="152" cy="500" rx="5" ry="3" fill="#2E7D32" opacity="0.6"/> |
| 126 | <!-- 竹叶 --> |
| 127 | <ellipse cx="55" cy="220" rx="22" ry="6" fill="#4A7C59" opacity="0.5" transform="rotate(30 55 220)"/> |
| 128 | <ellipse cx="95" cy="340" rx="20" ry="5" fill="#2E7D32" opacity="0.55" transform="rotate(-25 95 340)"/> |
| 129 | <ellipse cx="245" cy="280" rx="24" ry="6" fill="#6B8E6B" opacity="0.5" transform="rotate(40 245 280)"/> |
| 130 | <ellipse cx="295" cy="450" rx="22" ry="5" fill="#4A7C59" opacity="0.55" transform="rotate(-30 295 450)"/> |
| 131 | <ellipse cx="335" cy="600" rx="20" ry="5" fill="#2E7D32" opacity="0.5" transform="rotate(20 335 600)"/> |
| 132 | </svg> |
| 133 | |
| 134 | <!-- 飘落叶 --> |
| 135 | <div class="leaf l1"></div> |
| 136 | <div class="leaf l2"></div> |
| 137 | <div class="leaf l3"></div> |
| 138 | |
| 139 | <!-- 印章 --> |
| 140 | <div class="seal">竹影<br>漫步</div> |
| 141 | |
| 142 | <!-- 标题 --> |
| 143 | <div class="title"> |
| 144 | <div class="en-tag">ORIENTAL · ZEN · POETRY</div> |
| 145 | <div class="main-title">竹<span class="accent">影</span>漫步</div> |
| 146 | <div class="poem">月色入户 <span class="ink-dot"></span> 竹影满庭</div> |
| 147 | </div> |
| 148 | |
| 149 | <!-- 正文 --> |
| 150 | <div class="body"> |
| 151 | 于<strong>留白</strong>处见禅意，于<strong>竹影</strong>间听风声。<br> |
| 152 | 一片叶落，一缕月光，皆是东方的诗。<br> |
| 153 | 让设计回归本真，让画面自己呼吸。 |
| 154 | </div> |
| 155 | |
| 156 | <!-- 右侧竖排诗 --> |
| 157 | <div class="vert-poem">独坐幽篁里<br><span class="red">弹琴复长啸</span></div> |
| 158 | |
| 159 | <!-- 底部 --> |
| 160 | <div class="baseline"></div> |
| 161 | <div class="meta">VOL. 07 · ORIENTAL POETIC</div> |
| 162 | <div class="meta-r">禅 · 静 · 诗 · 画</div> |
| 163 | </div> |
| 164 | </body> |
| 165 | </html> |
| 166 |