| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh-CN"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="template:media-width" content="1024"> |
| 6 | <meta name="template:media-height" content="1024"> |
| 7 | <meta name="viewport" content="width=1080, height=1920"> |
| 8 | <title>人生感悟 - 1080x1920</title> |
| 9 | <!-- Google Fonts - 中文字体 --> |
| 10 | <link rel="preconnect" href="https://fonts.googleapis.com"> |
| 11 | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| 12 | <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet"> |
| 13 | <style> |
| 14 | * { margin: 0; padding: 0; box-sizing: border-box; } |
| 15 | |
| 16 | html, body { |
| 17 | width: 1080px; |
| 18 | height: 1920px; |
| 19 | overflow: hidden; |
| 20 | } |
| 21 | |
| 22 | body { |
| 23 | font-family: 'Noto Sans SC', 'PingFang SC', 'Source Han Sans', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif; |
| 24 | background: #F5F1E8; /* 浅色温暖的米黄色背景 */ |
| 25 | position: relative; |
| 26 | display: flex; |
| 27 | flex-direction: column; |
| 28 | align-items: center; |
| 29 | overflow: hidden; |
| 30 | } |
| 31 | |
| 32 | /* 背景花纹装饰层 */ |
| 33 | .bg-pattern { |
| 34 | position: absolute; |
| 35 | top: 0; |
| 36 | left: 0; |
| 37 | width: 100%; |
| 38 | height: 100%; |
| 39 | z-index: 0; |
| 40 | pointer-events: none; |
| 41 | overflow: hidden; |
| 42 | } |
| 43 | |
| 44 | /* 点状纹理图案 */ |
| 45 | .dot-pattern { |
| 46 | position: absolute; |
| 47 | top: 0; |
| 48 | left: 0; |
| 49 | width: 100%; |
| 50 | height: 100%; |
| 51 | background-image: |
| 52 | radial-gradient(circle, rgba(120, 90, 70, 0.15) 1.5px, transparent 1.5px), |
| 53 | radial-gradient(circle, rgba(100, 75, 60, 0.12) 1px, transparent 1px); |
| 54 | background-size: 40px 40px, 80px 80px; |
| 55 | background-position: 0 0, 20px 20px; |
| 56 | opacity: 0.8; |
| 57 | } |
| 58 | |
| 59 | /* 网格纹理图案 */ |
| 60 | .grid-pattern { |
| 61 | position: absolute; |
| 62 | top: 0; |
| 63 | left: 0; |
| 64 | width: 100%; |
| 65 | height: 100%; |
| 66 | background-image: |
| 67 | linear-gradient(rgba(110, 85, 65, 0.12) 1px, transparent 1px), |
| 68 | linear-gradient(90deg, rgba(110, 85, 65, 0.12) 1px, transparent 1px); |
| 69 | background-size: 60px 60px; |
| 70 | opacity: 0.7; |
| 71 | } |
| 72 | |
| 73 | /* 装饰性圆形元素 */ |
| 74 | .decorative-circle { |
| 75 | position: absolute; |
| 76 | border-radius: 50%; |
| 77 | border: 1.5px solid rgba(110, 85, 65, 0.15); |
| 78 | background: rgba(140, 110, 90, 0.08); |
| 79 | } |
| 80 | |
| 81 | .circle-1 { |
| 82 | width: 400px; |
| 83 | height: 400px; |
| 84 | top: -150px; |
| 85 | right: -100px; |
| 86 | } |
| 87 | |
| 88 | .circle-2 { |
| 89 | width: 300px; |
| 90 | height: 300px; |
| 91 | bottom: -100px; |
| 92 | left: -80px; |
| 93 | } |
| 94 | |
| 95 | .circle-3 { |
| 96 | width: 200px; |
| 97 | height: 200px; |
| 98 | top: 50%; |
| 99 | left: -50px; |
| 100 | transform: translateY(-50%); |
| 101 | } |
| 102 | |
| 103 | /* 波浪纹理（可选，更柔和） */ |
| 104 | .wave-pattern { |
| 105 | position: absolute; |
| 106 | top: 0; |
| 107 | left: 0; |
| 108 | width: 100%; |
| 109 | height: 100%; |
| 110 | background-image: |
| 111 | repeating-linear-gradient( |
| 112 | 45deg, |
| 113 | transparent, |
| 114 | transparent 10px, |
| 115 | rgba(110, 85, 65, 0.08) 10px, |
| 116 | rgba(110, 85, 65, 0.08) 20px |
| 117 | ); |
| 118 | opacity: 0.6; |
| 119 | } |
| 120 | |
| 121 | /* 顶部标题区域 */ |
| 122 | .header { |
| 123 | margin-top: 200px; |
| 124 | text-align: center; |
| 125 | position: relative; |
| 126 | z-index: 2; |
| 127 | } |
| 128 | |
| 129 | .title { |
| 130 | font-size: 80px; |
| 131 | font-weight: 900; |
| 132 | line-height: 1.4; |
| 133 | color: #1A1611; /* 深棕色/黑色 */ |
| 134 | letter-spacing: 3px; |
| 135 | text-shadow: |
| 136 | 1px 1px 0 rgba(0, 0, 0, 0.2), |
| 137 | 2px 2px 2px rgba(0, 0, 0, 0.15); |
| 138 | /* 模拟略微纹理效果 */ |
| 139 | background: linear-gradient(135deg, #1A1611 0%, #2C2416 50%, #1A1611 100%); |
| 140 | -webkit-background-clip: text; |
| 141 | -webkit-text-fill-color: transparent; |
| 142 | background-clip: text; |
| 143 | filter: contrast(1.1) brightness(0.9); |
| 144 | } |
| 145 | |
| 146 | .content { |
| 147 | display: flex; |
| 148 | flex: 1; |
| 149 | justify-content: center; |
| 150 | align-items: center; |
| 151 | position: relative; |
| 152 | z-index: 2; |
| 153 | } |
| 154 | |
| 155 | .content img { |
| 156 | width: 600px; |
| 157 | height: 600px; |
| 158 | object-fit: contain; |
| 159 | position: relative; |
| 160 | z-index: 1; |
| 161 | } |
| 162 | |
| 163 | /* 底部文字区域 */ |
| 164 | .bottom-section { |
| 165 | /* padding: 60px 80px 160px; */ |
| 166 | padding: 0 40px; |
| 167 | text-align: center; |
| 168 | position: relative; |
| 169 | z-index: 2; |
| 170 | margin-bottom: 200px; |
| 171 | } |
| 172 | |
| 173 | .content-text { |
| 174 | font-size: 50px; |
| 175 | font-weight: 400; |
| 176 | color: #000; |
| 177 | line-height: 1.8; |
| 178 | margin-bottom: 30px; |
| 179 | } |
| 180 | |
| 181 | .author { |
| 182 | width: 100%; |
| 183 | font-size: 30px; |
| 184 | font-family: 'Liu Jian Mao Cao', 'ZCOOL KuaiLe', cursive; |
| 185 | text-shadow: -1px -1px 0 #000, |
| 186 | 1px -1px 0 #000, |
| 187 | -1px 1px 0 #000, |
| 188 | 1px 1px 0 #000; |
| 189 | margin : 0 20px 20px 0; |
| 190 | text-align: right; |
| 191 | position: relative; |
| 192 | z-index: 2; |
| 193 | } |
| 194 | </style> |
| 195 | </head> |
| 196 | <body> |
| 197 | <!-- 背景花纹层 --> |
| 198 | <div class="bg-pattern"> |
| 199 | <!-- 点状纹理 --> |
| 200 | <div class="dot-pattern"></div> |
| 201 | <!-- 网格纹理 --> |
| 202 | <div class="grid-pattern"></div> |
| 203 | <!-- 波浪纹理（可选，如需更柔和效果可取消注释） --> |
| 204 | <!-- <div class="wave-pattern"></div> --> |
| 205 | <!-- 装饰性圆形 --> |
| 206 | <div class="decorative-circle circle-1"></div> |
| 207 | <div class="decorative-circle circle-2"></div> |
| 208 | <div class="decorative-circle circle-3"></div> |
| 209 | </div> |
| 210 | |
| 211 | <!-- 顶部标题 --> |
| 212 | <div class="header"> |
| 213 | <div class="title">{{title}}</div> |
| 214 | </div> |
| 215 | |
| 216 | <!-- 中央插图 --> |
| 217 | <div class="content"> |
| 218 | <img |
| 219 | src="{{image}}" |
| 220 | /> |
| 221 | </div> |
| 222 | |
| 223 | <!-- 底部文字 --> |
| 224 | <div class="bottom-section"> |
| 225 | <div class="content-text">{{text}}</div> |
| 226 | </div> |
| 227 | |
| 228 | <div class="author">{{author=@Pixelle.AI}}</div> |
| 229 | </body> |
| 230 | </html> |
| 231 |