| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" content="width=1600, height=900"> |
| 6 | <title>秋日旅行手账</title> |
| 7 | <style> |
| 8 | * { margin: 0; padding: 0; box-sizing: border-box; } |
| 9 | html, body { |
| 10 | width: 1600px; height: 900px; |
| 11 | overflow: hidden; |
| 12 | font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif; |
| 13 | background: #F5E6C8; |
| 14 | } |
| 15 | .canvas { |
| 16 | position: relative; |
| 17 | width: 1600px; height: 900px; |
| 18 | background: #F5E6C8; |
| 19 | overflow: hidden; |
| 20 | } |
| 21 | |
| 22 | /* ── 手绘装饰元素 ── */ |
| 23 | |
| 24 | /* 枫叶 (左上) */ |
| 25 | .leaf-1 { |
| 26 | position: absolute; top: 38px; left: 52px; |
| 27 | width: 60px; height: 60px; |
| 28 | } |
| 29 | .leaf-1::before { |
| 30 | content: ""; |
| 31 | display: block; |
| 32 | width: 60px; height: 60px; |
| 33 | background: #E87D3E; |
| 34 | border-radius: 0 50% 50% 50%; |
| 35 | transform: rotate(-15deg); |
| 36 | opacity: 0.7; |
| 37 | } |
| 38 | .leaf-1::after { |
| 39 | content: ""; |
| 40 | position: absolute; top: 28px; left: 28px; |
| 41 | width: 4px; height: 24px; |
| 42 | background: #8B5E3C; |
| 43 | border-radius: 2px; |
| 44 | transform: rotate(-15deg); |
| 45 | } |
| 46 | |
| 47 | /* 枫叶 (右上) */ |
| 48 | .leaf-2 { |
| 49 | position: absolute; top: 50px; right: 80px; |
| 50 | width: 48px; height: 48px; |
| 51 | } |
| 52 | .leaf-2::before { |
| 53 | content: ""; |
| 54 | display: block; |
| 55 | width: 48px; height: 48px; |
| 56 | background: #C04851; |
| 57 | border-radius: 0 50% 50% 50%; |
| 58 | transform: rotate(25deg); |
| 59 | opacity: 0.6; |
| 60 | } |
| 61 | .leaf-2::after { |
| 62 | content: ""; |
| 63 | position: absolute; top: 22px; left: 22px; |
| 64 | width: 3px; height: 20px; |
| 65 | background: #8B5E3C; |
| 66 | border-radius: 2px; |
| 67 | transform: rotate(25deg); |
| 68 | } |
| 69 | |
| 70 | /* 小星星装饰 */ |
| 71 | .star { |
| 72 | position: absolute; |
| 73 | width: 18px; height: 18px; |
| 74 | } |
| 75 | .star::before { |
| 76 | content: "★"; |
| 77 | font-size: 18px; |
| 78 | color: #E87D3E; |
| 79 | opacity: 0.5; |
| 80 | } |
| 81 | .star-1 { top: 120px; left: 300px; } |
| 82 | .star-2 { top: 200px; right: 260px; } |
| 83 | .star-3 { bottom: 130px; left: 480px; } |
| 84 | .star-4 { bottom: 80px; right: 180px; } |
| 85 | |
| 86 | /* 爱心装饰 */ |
| 87 | .heart { |
| 88 | position: absolute; |
| 89 | width: 22px; height: 20px; |
| 90 | } |
| 91 | .heart::before { |
| 92 | content: "♥"; |
| 93 | font-size: 20px; |
| 94 | color: #C04851; |
| 95 | opacity: 0.4; |
| 96 | } |
| 97 | .heart-1 { top: 85px; left: 160px; } |
| 98 | .heart-2 { bottom: 160px; right: 340px; } |
| 99 | .heart-3 { top: 260px; left: 520px; } |
| 100 | |
| 101 | /* ── 虚线路径 ── */ |
| 102 | .dotted-path { |
| 103 | position: absolute; |
| 104 | border: 0; |
| 105 | border-top: 3px dashed #8B5E3C; |
| 106 | opacity: 0.35; |
| 107 | } |
| 108 | .path-1 { |
| 109 | top: 310px; left: 130px; |
| 110 | width: 340px; height: 0; |
| 111 | transform: rotate(-5deg); |
| 112 | } |
| 113 | .path-2 { |
| 114 | top: 310px; left: 470px; |
| 115 | width: 280px; height: 0; |
| 116 | transform: rotate(3deg); |
| 117 | } |
| 118 | .path-3 { |
| 119 | top: 480px; left: 100px; |
| 120 | width: 400px; height: 0; |
| 121 | transform: rotate(-2deg); |
| 122 | } |
| 123 | .path-4 { |
| 124 | top: 480px; left: 500px; |
| 125 | width: 350px; height: 0; |
| 126 | transform: rotate(4deg); |
| 127 | } |
| 128 | |
| 129 | /* 路径上的小圆点 (连接点) */ |
| 130 | .dot { |
| 131 | position: absolute; |
| 132 | width: 10px; height: 10px; |
| 133 | background: #8B5E3C; |
| 134 | border-radius: 50%; |
| 135 | opacity: 0.4; |
| 136 | } |
| 137 | .dot-1 { top: 306px; left: 130px; } |
| 138 | .dot-2 { top: 306px; left: 470px; } |
| 139 | .dot-3 { top: 476px; left: 100px; } |
| 140 | .dot-4 { top: 476px; left: 500px; } |
| 141 | |
| 142 | /* ── 标题区域 (手绘标签) ── */ |
| 143 | .title-tag { |
| 144 | position: absolute; |
| 145 | top: 60px; left: 120px; |
| 146 | background: #C04851; |
| 147 | padding: 10px 28px 10px 24px; |
| 148 | border-radius: 0 20px 20px 0; |
| 149 | } |
| 150 | .title-tag::before { |
| 151 | content: ""; |
| 152 | position: absolute; |
| 153 | left: -12px; top: 50%; |
| 154 | transform: translateY(-50%); |
| 155 | width: 0; height: 0; |
| 156 | border-top: 18px solid transparent; |
| 157 | border-bottom: 18px solid transparent; |
| 158 | border-right: 12px solid #C04851; |
| 159 | } |
| 160 | .title-tag h1 { |
| 161 | font-size: 36px; font-weight: 700; |
| 162 | color: #FFF; letter-spacing: 4px; |
| 163 | } |
| 164 | |
| 165 | /* ── 副标题 ── */ |
| 166 | .subtitle { |
| 167 | position: absolute; |
| 168 | top: 130px; left: 140px; |
| 169 | font-size: 18px; |
| 170 | color: #8B5E3C; |
| 171 | font-weight: 500; |
| 172 | letter-spacing: 2px; |
| 173 | background: rgba(255,255,255,0.45); |
| 174 | padding: 6px 18px; |
| 175 | border-radius: 30px; |
| 176 | border: 2px dashed #8B5E3C; |
| 177 | } |
| 178 | |
| 179 | /* ── 主卡片 ── */ |
| 180 | .card-main { |
| 181 | position: absolute; |
| 182 | top: 190px; left: 110px; |
| 183 | width: 460px; |
| 184 | background: rgba(255,255,255,0.55); |
| 185 | border-radius: 24px; |
| 186 | padding: 28px 30px 30px 30px; |
| 187 | border: 2.5px solid #8B5E3C; |
| 188 | } |
| 189 | .card-main .note-mark { |
| 190 | position: absolute; |
| 191 | top: -14px; right: 20px; |
| 192 | font-size: 22px; color: #E87D3E; |
| 193 | background: #F5E6C8; |
| 194 | padding: 0 8px; |
| 195 | } |
| 196 | .card-main p { |
| 197 | font-size: 15px; line-height: 1.8; |
| 198 | color: #4A3728; |
| 199 | } |
| 200 | .card-main .hl-orange { |
| 201 | display: inline-block; |
| 202 | background: #E87D3E; color: #FFF; |
| 203 | font-weight: 700; padding: 0 8px; |
| 204 | border-radius: 6px; |
| 205 | } |
| 206 | .card-main .hl-blue { |
| 207 | display: inline-block; |
| 208 | background: #6BA3BE; color: #FFF; |
| 209 | font-weight: 700; padding: 0 8px; |
| 210 | border-radius: 6px; |
| 211 | } |
| 212 | |
| 213 | /* ── 对话框 (第二天) ── */ |
| 214 | .speech-bubble { |
| 215 | position: absolute; |
| 216 | top: 200px; right: 120px; |
| 217 | width: 300px; |
| 218 | background: #FFF; |
| 219 | border: 2.5px solid #8B5E3C; |
| 220 | border-radius: 24px; |
| 221 | padding: 22px 24px; |
| 222 | } |
| 223 | .speech-bubble::after { |
| 224 | content: ""; |
| 225 | position: absolute; |
| 226 | bottom: -16px; left: 40px; |
| 227 | width: 0; height: 0; |
| 228 | border-left: 14px solid transparent; |
| 229 | border-right: 14px solid transparent; |
| 230 | border-top: 16px solid #FFF; |
| 231 | } |
| 232 | .speech-bubble::before { |
| 233 | content: ""; |
| 234 | position: absolute; |
| 235 | bottom: -20px; left: 37px; |
| 236 | width: 0; height: 0; |
| 237 | border-left: 17px solid transparent; |
| 238 | border-right: 17px solid transparent; |
| 239 | border-top: 19px solid #8B5E3C; |
| 240 | } |
| 241 | .bubble-label { |
| 242 | display: inline-block; |
| 243 | background: #6BA3BE; |
| 244 | color: #FFF; |
| 245 | font-weight: 700; |
| 246 | font-size: 14px; |
| 247 | padding: 3px 14px; |
| 248 | border-radius: 30px; |
| 249 | margin-bottom: 10px; |
| 250 | letter-spacing: 1px; |
| 251 | } |
| 252 | .speech-bubble p { |
| 253 | font-size: 14px; |
| 254 | line-height: 1.8; |
| 255 | color: #4A3728; |
| 256 | } |
| 257 | .speech-bubble .exclaim { |
| 258 | display: inline-block; |
| 259 | background: #C04851; |
| 260 | color: #FFF; |
| 261 | font-weight: 700; |
| 262 | padding: 1px 10px; |
| 263 | border-radius: 30px; |
| 264 | font-size: 14px; |
| 265 | } |
| 266 | |
| 267 | /* ── 底部信息卡片 ── */ |
| 268 | .card-bottom { |
| 269 | position: absolute; |
| 270 | bottom: 60px; left: 120px; |
| 271 | width: 380px; |
| 272 | background: rgba(255,255,255,0.5); |
| 273 | border-radius: 20px; |
| 274 | padding: 18px 22px; |
| 275 | border: 2px dashed #8B5E3C; |
| 276 | } |
| 277 | .card-bottom .tag-row { |
| 278 | display: flex; |
| 279 | gap: 10px; |
| 280 | margin-bottom: 10px; |
| 281 | } |
| 282 | .card-bottom .tag { |
| 283 | color: #FFF; font-size: 12px; |
| 284 | font-weight: 700; padding: 2px 14px; |
| 285 | border-radius: 30px; |
| 286 | background: #E87D3E; |
| 287 | } |
| 288 | .card-bottom .tag-b { background: #6BA3BE; } |
| 289 | .card-bottom .tag-r { background: #C04851; } |
| 290 | .card-bottom p { |
| 291 | font-size: 13px; |
| 292 | color: #4A3728; |
| 293 | line-height: 1.7; |
| 294 | } |
| 295 | |
| 296 | /* ── 右侧插图 (手绘小房子) ── */ |
| 297 | .illustration { |
| 298 | position: absolute; |
| 299 | bottom: 50px; right: 100px; |
| 300 | width: 200px; height: 160px; |
| 301 | } |
| 302 | /* 房子主体 */ |
| 303 | .house-body { |
| 304 | position: absolute; |
| 305 | bottom: 0; left: 40px; |
| 306 | width: 120px; height: 90px; |
| 307 | background: #E87D3E; |
| 308 | border-radius: 6px; |
| 309 | border: 3px solid #8B5E3C; |
| 310 | } |
| 311 | /* 屋顶 */ |
| 312 | .house-roof { |
| 313 | position: absolute; |
| 314 | bottom: 90px; left: 30px; |
| 315 | width: 0; height: 0; |
| 316 | border-left: 70px solid transparent; |
| 317 | border-right: 70px solid transparent; |
| 318 | border-bottom: 50px solid #C04851; |
| 319 | filter: drop-shadow(0 2px 0 #8B5E3C); |
| 320 | } |
| 321 | /* 烟囱 */ |
| 322 | .house-chimney { |
| 323 | position: absolute; |
| 324 | bottom: 110px; left: 120px; |
| 325 | width: 20px; height: 40px; |
| 326 | background: #8B5E3C; |
| 327 | border-radius: 4px 4px 0 0; |
| 328 | } |
| 329 | /* 烟 */ |
| 330 | .smoke { |
| 331 | position: absolute; |
| 332 | bottom: 148px; left: 124px; |
| 333 | width: 12px; height: 12px; |
| 334 | background: rgba(139,94,60,0.25); |
| 335 | border-radius: 50%; |
| 336 | } |
| 337 | .smoke-2 { |
| 338 | bottom: 158px; left: 132px; |
| 339 | width: 10px; height: 10px; |
| 340 | } |
| 341 | /* 门 */ |
| 342 | .house-door { |
| 343 | position: absolute; |
| 344 | bottom: 0; left: 80px; |
| 345 | width: 30px; height: 50px; |
| 346 | background: #8B5E3C; |
| 347 | border-radius: 4px 4px 0 0; |
| 348 | border: 2px solid #4A3728; |
| 349 | } |
| 350 | /* 窗户 */ |
| 351 | .house-window { |
| 352 | position: absolute; |
| 353 | bottom: 45px; left: 55px; |
| 354 | width: 22px; height: 22px; |
| 355 | background: #6BA3BE; |
| 356 | border: 2.5px solid #8B5E3C; |
| 357 | border-radius: 4px; |
| 358 | } |
| 359 | .house-window2 { |
| 360 | left: 115px; |
| 361 | } |
| 362 | /* 窗框十字 */ |
| 363 | .window-cross { |
| 364 | position: absolute; |
| 365 | bottom: 45px; left: 55px; |
| 366 | width: 22px; height: 22px; |
| 367 | } |
| 368 | .window-cross2 { left: 115px; } |
| 369 | .window-cross::before { |
| 370 | content: ""; |
| 371 | position: absolute; |
| 372 | left: 50%; top: 0; |
| 373 | width: 2px; height: 100%; |
| 374 | background: #8B5E3C; |
| 375 | transform: translateX(-50%); |
| 376 | } |
| 377 | .window-cross::after { |
| 378 | content: ""; |
| 379 | position: absolute; |
| 380 | top: 50%; left: 0; |
| 381 | width: 100%; height: 2px; |
| 382 | background: #8B5E3C; |
| 383 | transform: translateY(-50%); |
| 384 | } |
| 385 | |
| 386 | /* ── 地面线 ── */ |
| 387 | .ground { |
| 388 | position: absolute; |
| 389 | bottom: 42px; right: 60px; |
| 390 | width: 220px; |
| 391 | border-top: 3px dashed #8B5E3C; |
| 392 | opacity: 0.3; |
| 393 | } |
| 394 | |
| 395 | /* ── 小树 ── */ |
| 396 | .tree { |
| 397 | position: absolute; |
| 398 | bottom: 50px; right: 280px; |
| 399 | } |
| 400 | .tree-trunk { |
| 401 | width: 10px; height: 30px; |
| 402 | background: #8B5E3C; |
| 403 | border-radius: 3px; |
| 404 | margin: 0 auto; |
| 405 | } |
| 406 | .tree-top { |
| 407 | width: 40px; height: 40px; |
| 408 | background: #E87D3E; |
| 409 | border-radius: 50%; |
| 410 | margin: 0 auto -6px auto; |
| 411 | border: 2px solid #8B5E3C; |
| 412 | opacity: 0.7; |
| 413 | } |
| 414 | |
| 415 | /* ── 小云朵 ── */ |
| 416 | .cloud { |
| 417 | position: absolute; |
| 418 | width: 60px; height: 24px; |
| 419 | background: rgba(107,163,190,0.2); |
| 420 | border-radius: 30px; |
| 421 | } |
| 422 | .cloud::before { |
| 423 | content: ""; |
| 424 | position: absolute; |
| 425 | top: -12px; left: 12px; |
| 426 | width: 30px; height: 30px; |
| 427 | background: rgba(107,163,190,0.2); |
| 428 | border-radius: 50%; |
| 429 | } |
| 430 | .cloud::after { |
| 431 | content: ""; |
| 432 | position: absolute; |
| 433 | top: -8px; left: 28px; |
| 434 | width: 20px; height: 20px; |
| 435 | background: rgba(107,163,190,0.2); |
| 436 | border-radius: 50%; |
| 437 | } |
| 438 | .cloud-1 { top: 160px; right: 360px; } |
| 439 | .cloud-2 { top: 100px; left: 600px; width: 50px; height: 20px; } |
| 440 | |
| 441 | /* ── 虚线小箭头 ── */ |
| 442 | .arrow { |
| 443 | position: absolute; |
| 444 | width: 0; height: 0; |
| 445 | border-left: 8px solid transparent; |
| 446 | border-right: 8px solid transparent; |
| 447 | border-top: 10px solid #8B5E3C; |
| 448 | opacity: 0.35; |
| 449 | } |
| 450 | .arrow-1 { top: 310px; left: 470px; transform: translateX(-50%); } |
| 451 | .arrow-2 { top: 480px; left: 500px; transform: translateX(-50%); } |
| 452 | |
| 453 | /* ── 手绘圆圈 ── */ |
| 454 | .doodle-circle { |
| 455 | position: absolute; |
| 456 | border-radius: 50%; |
| 457 | border: 2.5px dashed #8B5E3C; |
| 458 | opacity: 0.2; |
| 459 | } |
| 460 | .dc-1 { top: 340px; right: 480px; width: 80px; height: 80px; } |
| 461 | .dc-2 { bottom: 200px; left: 560px; width: 50px; height: 50px; } |
| 462 | </style> |
| 463 | </head> |
| 464 | <body> |
| 465 | <div class="canvas"> |
| 466 | |
| 467 | <!-- 装饰：枫叶 --> |
| 468 | <div class="leaf-1"></div> |
| 469 | <div class="leaf-2"></div> |
| 470 | |
| 471 | <!-- 装饰：星星 --> |
| 472 | <div class="star star-1"></div> |
| 473 | <div class="star star-2"></div> |
| 474 | <div class="star star-3"></div> |
| 475 | <div class="star star-4"></div> |
| 476 | |
| 477 | <!-- 装饰：爱心 --> |
| 478 | <div class="heart heart-1"></div> |
| 479 | <div class="heart heart-2"></div> |
| 480 | <div class="heart heart-3"></div> |
| 481 | |
| 482 | <!-- 虚线路径 --> |
| 483 | <div class="dotted-path path-1"></div> |
| 484 | <div class="dotted-path path-2"></div> |
| 485 | <div class="dotted-path path-3"></div> |
| 486 | <div class="dotted-path path-4"></div> |
| 487 | |
| 488 | <div class="dot dot-1"></div> |
| 489 | <div class="dot dot-2"></div> |
| 490 | <div class="dot dot-3"></div> |
| 491 | <div class="dot dot-4"></div> |
| 492 | |
| 493 | <div class="arrow arrow-1"></div> |
| 494 | <div class="arrow arrow-2"></div> |
| 495 | |
| 496 | <!-- 手绘圆圈 --> |
| 497 | <div class="doodle-circle dc-1"></div> |
| 498 | <div class="doodle-circle dc-2"></div> |
| 499 | |
| 500 | <!-- 云朵 --> |
| 501 | <div class="cloud cloud-1"></div> |
| 502 | <div class="cloud cloud-2"></div> |
| 503 | |
| 504 | <!-- ===== 标题 ===== --> |
| 505 | <div class="title-tag"> |
| 506 | <h1>秋日漫游记</h1> |
| 507 | </div> |
| 508 | <div class="subtitle">用画笔记录每一片落叶的故事</div> |
| 509 | |
| 510 | <!-- ===== 主卡片 ===== --> |
| 511 | <div class="card-main"> |
| 512 | <div class="note-mark">✎</div> |
| 513 | <p> |
| 514 | 背上背包，踏上开往山野的列车。<br> |
| 515 | 第一站是 <span class="hl-orange">枫叶谷</span>，漫山遍野的暖橙色铺成一片柔软的海洋。<br> |
| 516 | 沿着溪流走了整整一个下午，捡到了 <span class="hl-blue">七种不同形状</span> 的叶子。<br> |
| 517 | 傍晚时分，山间小屋的烟囱升起袅袅炊烟——<br> |
| 518 | 旅店阿姨端来热腾腾的南瓜汤，<span class="hl-orange">超暖！</span> |
| 519 | </p> |
| 520 | </div> |
| 521 | |
| 522 | <!-- ===== 对话框 ===== --> |
| 523 | <div class="speech-bubble"> |
| 524 | <div class="bubble-label">★ 第二天</div> |
| 525 | <p> |
| 526 | 清晨被鸟鸣叫醒，推开窗就看到<br> |
| 527 | 湖面飘着一层薄雾。<br> |
| 528 | 坐小木船划过对岸，<br> |
| 529 | 偶遇一片 <span class="exclaim">超美！</span> 的红杉林。<br> |
| 530 | 在树下野餐时，一只小松鼠<br> |
| 531 | 悄悄叼走了我的饼干～ |
| 532 | </p> |
| 533 | </div> |
| 534 | |
| 535 | <!-- ===== 底部信息卡片 ===== --> |
| 536 | <div class="card-bottom"> |
| 537 | <div class="tag-row"> |
| 538 | <span class="tag">🍂 赏枫</span> |
| 539 | <span class="tag tag-b">☁ 徒步</span> |
| 540 | <span class="tag tag-r">♥ 美食</span> |
| 541 | </div> |
| 542 | <p> |
| 543 | 最佳季节：10 月中旬至 11 月初<br> |
| 544 | 推荐路线：枫叶谷 → 镜湖 → 红杉秘境<br> |
| 545 | 随身好物：手账本 & 水彩笔 |
| 546 | </p> |
| 547 | </div> |
| 548 | |
| 549 | <!-- ===== 小房子插图 ===== --> |
| 550 | <div class="illustration"> |
| 551 | <div class="house-chimney"></div> |
| 552 | <div class="smoke smoke-1"></div> |
| 553 | <div class="smoke smoke-2"></div> |
| 554 | <div class="house-roof"></div> |
| 555 | <div class="house-body"></div> |
| 556 | <div class="house-door"></div> |
| 557 | <div class="house-window"></div> |
| 558 | <div class="house-window house-window2"></div> |
| 559 | <div class="window-cross"></div> |
| 560 | <div class="window-cross window-cross2"></div> |
| 561 | <div class="ground"></div> |
| 562 | </div> |
| 563 | |
| 564 | <!-- 小树 --> |
| 565 | <div class="tree"> |
| 566 | <div class="tree-top"></div> |
| 567 | <div class="tree-trunk"></div> |
| 568 | </div> |
| 569 | |
| 570 | </div> |
| 571 | </body> |
| 572 | </html> |
| 573 |