| 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:"PingFang SC","Noto Sans SC","Helvetica Neue",sans-serif; } |
| 9 | .canvas { |
| 10 | width: 1600px; height: 900px; position: relative; color: #4A4448; |
| 11 | background: |
| 12 | radial-gradient(ellipse at 15% 20%, rgba(200,184,217,0.35) 0%, transparent 55%), |
| 13 | radial-gradient(ellipse at 85% 30%, rgba(232,206,200,0.35) 0%, transparent 55%), |
| 14 | radial-gradient(ellipse at 50% 90%, rgba(156,217,201,0.3) 0%, transparent 55%), |
| 15 | linear-gradient(135deg, #FBF6F2 0%, #FAF3EC 100%); |
| 16 | } |
| 17 | |
| 18 | /* 顶部情绪标 */ |
| 19 | .mood-tag { |
| 20 | position: absolute; top: 70px; left: 140px; |
| 21 | font-size: 16px; color: #6B5D5F; letter-spacing: 6px; |
| 22 | } |
| 23 | .mood-tag::before { content:""; display:inline-block; width:24px; height:2px; background:#9B7FB5; vertical-align:middle; margin-right:12px; border-radius:2px; } |
| 24 | |
| 25 | /* 月亮装饰 */ |
| 26 | .moon { |
| 27 | position: absolute; top: 80px; right: 180px; |
| 28 | width: 110px; height: 110px; border-radius: 50%; |
| 29 | background: radial-gradient(circle at 35% 35%, #FBF6F2 0%, #DCC8E8 80%); |
| 30 | box-shadow: 0 0 50px rgba(200,184,217,0.6); |
| 31 | } |
| 32 | |
| 33 | /* 标题 */ |
| 34 | .title { position: absolute; top: 230px; left: 140px; } |
| 35 | .main-title { |
| 36 | font-size: 108px; font-weight: 600; color: #4A4448; |
| 37 | letter-spacing: 8px; line-height: 1.1; |
| 38 | } |
| 39 | .main-title .purple { color: #9B7FB5; } |
| 40 | .main-title .mint { color: #6FB9A6; } |
| 41 | .sub-title { |
| 42 | font-size: 26px; color: #6B5D5F; letter-spacing: 8px; |
| 43 | margin-top: 26px; font-weight: 300; |
| 44 | } |
| 45 | |
| 46 | /* 三色情绪卡 */ |
| 47 | .moods { |
| 48 | position: absolute; top: 480px; left: 140px; |
| 49 | display: flex; gap: 30px; |
| 50 | } |
| 51 | .mcard { |
| 52 | width: 280px; padding: 36px 32px; border-radius: 28px; |
| 53 | color: #4A4448; |
| 54 | } |
| 55 | .mc1 { background: linear-gradient(140deg, #DCC8E8 0%, #C8B8D9 100%); } |
| 56 | .mc2 { background: linear-gradient(140deg, #F0DDD2 0%, #E8CEC8 100%); } |
| 57 | .mc3 { background: linear-gradient(140deg, #BFE8DB 0%, #9CD9C9 100%); } |
| 58 | .mcard .emoji { font-size: 44px; margin-bottom: 16px; } |
| 59 | .mcard .mood-name { |
| 60 | font-size: 30px; font-weight: 600; letter-spacing: 4px; margin-bottom: 10px; |
| 61 | } |
| 62 | .mcard .mood-desc { |
| 63 | font-size: 16px; line-height: 1.8; letter-spacing: 1px; opacity: 0.85; |
| 64 | } |
| 65 | .mcard .hex { |
| 66 | font-size: 13px; margin-top: 18px; opacity: 0.7; |
| 67 | font-family:"Helvetica Neue",sans-serif; letter-spacing: 1px; |
| 68 | } |
| 69 | |
| 70 | /* 右侧引文 */ |
| 71 | .quote { |
| 72 | position: absolute; top: 250px; right: 140px; |
| 73 | width: 340px; font-size: 22px; line-height: 2.1; |
| 74 | color: #4A4448; letter-spacing: 1px; text-align: right; |
| 75 | font-weight: 300; |
| 76 | } |
| 77 | .quote .em { color: #9B7FB5; font-weight: 500; } |
| 78 | .signature { |
| 79 | position: absolute; top: 470px; right: 140px; |
| 80 | font-size: 18px; color: #6B5D5F; letter-spacing: 3px; |
| 81 | text-align: right; font-family:"STKaiti",serif; |
| 82 | } |
| 83 | |
| 84 | /* 底部 */ |
| 85 | .footer { |
| 86 | position: absolute; left: 140px; right: 140px; bottom: 60px; |
| 87 | display:flex; justify-content:space-between; align-items:center; |
| 88 | padding-top: 22px; border-top: 1px solid rgba(107,93,95,0.15); |
| 89 | } |
| 90 | .footer .l { font-size: 16px; color: #6B5D5F; letter-spacing: 4px; } |
| 91 | .footer .r { font-size: 14px; color: #6B5D5F; letter-spacing: 3px; font-family:"Helvetica Neue",sans-serif; } |
| 92 | </style> |
| 93 | </head> |
| 94 | <body> |
| 95 | <div class="canvas"> |
| 96 | <div class="mood-tag">HEALING COLOR · 情绪疗愈</div> |
| 97 | <div class="moon"></div> |
| 98 | |
| 99 | <div class="title"> |
| 100 | <div class="main-title">柔<span class="purple">光</span>时<span class="mint">刻</span></div> |
| 101 | <div class="sub-title">每一种情绪，都值得被温柔接住</div> |
| 102 | </div> |
| 103 | |
| 104 | <div class="quote"> |
| 105 | 在喧嚣的世界里，<br> |
| 106 | 给自己留一抹<span class="em">柔软的色</span>。<br> |
| 107 | 让心慢慢安静下来，<br> |
| 108 | 像清晨第一缕<span class="em">柔光</span>。 |
| 109 | </div> |
| 110 | <div class="signature">—— 写给每一个疲惫的你</div> |
| 111 | |
| 112 | <div class="moods"> |
| 113 | <div class="mcard mc1"> |
| 114 | <div class="emoji">🌙</div> |
| 115 | <div class="mood-name">薰衣草</div> |
| 116 | <div class="mood-desc">安抚焦虑<br>带来宁静与安然</div> |
| 117 | <div class="hex">#C8B8D9</div> |
| 118 | </div> |
| 119 | <div class="mcard mc2"> |
| 120 | <div class="emoji">🍑</div> |
| 121 | <div class="mood-name">暖桃米</div> |
| 122 | <div class="mood-desc">温暖治愈<br>像被柔软拥抱</div> |
| 123 | <div class="hex">#E8CEC8</div> |
| 124 | </div> |
| 125 | <div class="mcard mc3"> |
| 126 | <div class="emoji">🌿</div> |
| 127 | <div class="mood-name">薄荷绿</div> |
| 128 | <div class="mood-desc">清新舒缓<br>释放紧绷情绪</div> |
| 129 | <div class="hex">#9CD9C9</div> |
| 130 | </div> |
| 131 | </div> |
| 132 | |
| 133 | <div class="footer"> |
| 134 | <div class="l">情绪疗愈色卡 · DAY 21</div> |
| 135 | <div class="r">HEALING COLOR CARD · VOL. 08</div> |
| 136 | </div> |
| 137 | </div> |
| 138 | </body> |
| 139 | </html> |
| 140 |