| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh-CN"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8" /> |
| 5 | <title>樱花治愈</title> |
| 6 | <style> |
| 7 | * { box-sizing: border-box; margin: 0; padding: 0; } |
| 8 | html, body { width: 100%; height: 100%; overflow: hidden; } |
| 9 | body { |
| 10 | display: grid; |
| 11 | place-items: center; |
| 12 | font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Songti SC", "Microsoft YaHei", serif; |
| 13 | } |
| 14 | .slide { |
| 15 | position: relative; |
| 16 | aspect-ratio: 16 / 9; |
| 17 | width: min(100vw, calc(100vh * 16 / 9)); |
| 18 | overflow: hidden; |
| 19 | background: linear-gradient(180deg, #F7E7DD 0%, #FBEDE6 45%, #E8EFE3 75%, #DCE8DF 100%); |
| 20 | color: #3A2A22; |
| 21 | } |
| 22 | /* 樱花树冠（顶部一团团粉） */ |
| 23 | .blossom { |
| 24 | position: absolute; |
| 25 | border-radius: 50%; |
| 26 | background: radial-gradient(circle at 40% 40%, #FBC0CB 0%, #F4A8B6 60%, #CC6F88 100%); |
| 27 | opacity: 0.78; |
| 28 | filter: blur(0.4px); |
| 29 | } |
| 30 | .b1 { top: -8%; left: 4%; width: 30%; aspect-ratio: 1; } |
| 31 | .b2 { top: -12%; left: 26%; width: 34%; aspect-ratio: 1; opacity: 0.85; } |
| 32 | .b3 { top: -6%; left: 52%; width: 26%; aspect-ratio: 1; opacity: 0.72; } |
| 33 | .b4 { top: -14%; left: 70%; width: 30%; aspect-ratio: 1; opacity: 0.8; } |
| 34 | /* 飘落花瓣 */ |
| 35 | .petal { |
| 36 | position: absolute; |
| 37 | width: 10px; height: 7px; |
| 38 | background: #FBC0CB; |
| 39 | border-radius: 50% 50% 50% 0; |
| 40 | opacity: 0.7; |
| 41 | } |
| 42 | .p1 { top: 22%; left: 18%; transform: rotate(35deg); } |
| 43 | .p2 { top: 34%; left: 42%; transform: rotate(-20deg); opacity: 0.55; } |
| 44 | .p3 { top: 28%; left: 68%; transform: rotate(50deg); opacity: 0.6; } |
| 45 | .p4 { top: 44%; left: 12%; transform: rotate(15deg); opacity: 0.5; } |
| 46 | |
| 47 | /* 湖水 */ |
| 48 | .lake { |
| 49 | position: absolute; |
| 50 | left: 0; |
| 51 | bottom: 18%; |
| 52 | width: 46%; |
| 53 | height: 22%; |
| 54 | background: linear-gradient(180deg, #6FB2BC 0%, #5BA0AD 60%, #4A8A97 100%); |
| 55 | border-radius: 50% 12% 8% 0 / 60% 20% 12% 0; |
| 56 | opacity: 0.88; |
| 57 | } |
| 58 | /* 草地 */ |
| 59 | .grass { |
| 60 | position: absolute; |
| 61 | left: 0; right: 0; bottom: 0; |
| 62 | height: 26%; |
| 63 | background: linear-gradient(180deg, #8FBE7E 0%, #72AB60 60%, #5E964F 100%); |
| 64 | border-radius: 50% 50% 0 0 / 22% 22% 0 0; |
| 65 | } |
| 66 | /* 草地小花 */ |
| 67 | .flower { |
| 68 | position: absolute; |
| 69 | width: 8px; height: 8px; |
| 70 | border-radius: 50%; |
| 71 | background: #CC6F88; |
| 72 | opacity: 0.85; |
| 73 | } |
| 74 | .f1 { bottom: 9%; left: 38%; } |
| 75 | .f2 { bottom: 6%; left: 52%; background: #FBC0CB; } |
| 76 | .f3 { bottom: 11%; left: 68%; } |
| 77 | .f4 { bottom: 7%; left: 82%; background: #FBC0CB; opacity: 0.7; } |
| 78 | |
| 79 | /* 天鹅 */ |
| 80 | .swan { |
| 81 | position: absolute; |
| 82 | bottom: 30%; |
| 83 | left: 22%; |
| 84 | width: 26px; height: 14px; |
| 85 | } |
| 86 | .swan::before { |
| 87 | content: ""; position: absolute; inset: 0; |
| 88 | background: #FFFFFF; |
| 89 | border-radius: 50% 50% 60% 60% / 70% 70% 40% 40%; |
| 90 | } |
| 91 | .swan::after { |
| 92 | content: ""; position: absolute; |
| 93 | top: -8px; right: 2px; |
| 94 | width: 7px; height: 10px; |
| 95 | background: #FFFFFF; |
| 96 | border-radius: 60% 60% 0 60%; |
| 97 | transform: rotate(-15deg); |
| 98 | box-shadow: 0 -1px 0 1px #F4A35A inset; |
| 99 | } |
| 100 | /* 飞鸟剪影 */ |
| 101 | .bird { |
| 102 | position: absolute; |
| 103 | top: 18%; |
| 104 | width: 16px; height: 6px; |
| 105 | border-top: 2px solid #3A2A22; |
| 106 | border-radius: 50% 50% 0 0 / 100% 100% 0 0; |
| 107 | opacity: 0.55; |
| 108 | } |
| 109 | .bd1 { left: 30%; transform: scale(0.7); } |
| 110 | .bd2 { left: 40%; top: 20%; transform: scale(0.55); opacity: 0.45; } |
| 111 | |
| 112 | /* 文字内容 */ |
| 113 | .content { |
| 114 | position: absolute; |
| 115 | top: 14%; |
| 116 | right: 7%; |
| 117 | text-align: right; |
| 118 | } |
| 119 | .eyebrow { |
| 120 | font-family: "Snell Roundhand", "Bradley Hand", "STKaiti", cursive; |
| 121 | font-style: italic; |
| 122 | font-size: clamp(12px, 1.4vw, 22px); |
| 123 | color: #CC6F88; |
| 124 | letter-spacing: 0.08em; |
| 125 | margin-bottom: 10px; |
| 126 | opacity: 0.9; |
| 127 | } |
| 128 | .title { |
| 129 | font-family: "Snell Roundhand", "Bradley Hand", "STKaiti", "KaiTi", cursive; |
| 130 | font-size: clamp(64px, 11vw, 150px); |
| 131 | font-weight: 600; |
| 132 | line-height: 1; |
| 133 | color: #CC6F88; |
| 134 | letter-spacing: 0.06em; |
| 135 | text-shadow: 0 2px 8px rgba(204,111,136,0.18); |
| 136 | } |
| 137 | .poem { |
| 138 | position: absolute; |
| 139 | right: 9%; |
| 140 | top: 48%; |
| 141 | writing-mode: vertical-rl; |
| 142 | font-family: "Songti SC", "STSong", "SimSun", serif; |
| 143 | font-size: clamp(11px, 1.2vw, 18px); |
| 144 | font-weight: 300; |
| 145 | color: #5E4A3E; |
| 146 | letter-spacing: 0.3em; |
| 147 | opacity: 0.82; |
| 148 | line-height: 2.2; |
| 149 | } |
| 150 | |
| 151 | /* 色卡 */ |
| 152 | .palette { |
| 153 | position: absolute; |
| 154 | right: 6%; |
| 155 | bottom: 6%; |
| 156 | display: flex; |
| 157 | gap: clamp(8px, 1vw, 16px); |
| 158 | } |
| 159 | .sw { |
| 160 | width: clamp(30px, 3.6vw, 54px); |
| 161 | aspect-ratio: 1; |
| 162 | border-radius: 50%; |
| 163 | box-shadow: 0 3px 8px rgba(90,60,50,0.12); |
| 164 | border: 2px solid rgba(255,255,255,0.7); |
| 165 | } |
| 166 | /* 签名 */ |
| 167 | .sign { |
| 168 | position: absolute; |
| 169 | left: 6%; |
| 170 | bottom: 6%; |
| 171 | display: flex; |
| 172 | align-items: center; |
| 173 | gap: 12px; |
| 174 | color: #5E4A3E; |
| 175 | font-size: clamp(10px, 1vw, 15px); |
| 176 | letter-spacing: 0.22em; |
| 177 | opacity: 0.8; |
| 178 | } |
| 179 | .sign .bar { width: 28px; height: 1px; background: #CC6F88; opacity: 0.7; } |
| 180 | </style> |
| 181 | </head> |
| 182 | <body> |
| 183 | <div class="slide"> |
| 184 | <div class="blossom b1"></div> |
| 185 | <div class="blossom b2"></div> |
| 186 | <div class="blossom b3"></div> |
| 187 | <div class="blossom b4"></div> |
| 188 | <div class="petal p1"></div> |
| 189 | <div class="petal p2"></div> |
| 190 | <div class="petal p3"></div> |
| 191 | <div class="petal p4"></div> |
| 192 | |
| 193 | <div class="bird bd1"></div> |
| 194 | <div class="bird bd2"></div> |
| 195 | |
| 196 | <div class="lake"></div> |
| 197 | <div class="swan"></div> |
| 198 | <div class="grass"></div> |
| 199 | <div class="flower f1"></div> |
| 200 | <div class="flower f2"></div> |
| 201 | <div class="flower f3"></div> |
| 202 | <div class="flower f4"></div> |
| 203 | |
| 204 | <div class="content"> |
| 205 | <div class="eyebrow">toward the sun</div> |
| 206 | <h1 class="title">向阳</h1> |
| 207 | </div> |
| 208 | |
| 209 | <div class="poem">风暖并消融 万物始发生</div> |
| 210 | |
| 211 | <div class="palette"> |
| 212 | <div class="sw" style="background:#F7E7DD"></div> |
| 213 | <div class="sw" style="background:#FBC0CB"></div> |
| 214 | <div class="sw" style="background:#CC6F88"></div> |
| 215 | <div class="sw" style="background:#72AB60"></div> |
| 216 | <div class="sw" style="background:#5BA0AD"></div> |
| 217 | </div> |
| 218 | |
| 219 | <div class="sign"> |
| 220 | <span class="bar"></span> |
| 221 | <span>色彩沉溺 · 夏的另一种可能</span> |
| 222 | </div> |
| 223 | </div> |
| 224 | </body> |
| 225 | </html> |
| 226 |