| 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", "Microsoft YaHei", "Hiragino Maru Gothic", sans-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, #FF7F00 0%, #FF8E1C 40%, #FFA500 75%, #FEBB3E 100%); |
| 20 | color: #FFFFFF; |
| 21 | } |
| 22 | /* 草地 */ |
| 23 | .grass { |
| 24 | position: absolute; |
| 25 | left: 0; right: 0; bottom: 0; |
| 26 | height: 26%; |
| 27 | background: linear-gradient(180deg, #7CE62E 0%, #70D422 60%, #5CB81A 100%); |
| 28 | border-radius: 50% 50% 0 0 / 30% 30% 0 0; |
| 29 | } |
| 30 | /* 云朵 */ |
| 31 | .cloud { |
| 32 | position: absolute; |
| 33 | background: #FFFFFF; |
| 34 | border-radius: 40px; |
| 35 | opacity: 0.92; |
| 36 | } |
| 37 | .cloud::before, .cloud::after { |
| 38 | content: ""; position: absolute; background: #FFFFFF; border-radius: 50%; |
| 39 | } |
| 40 | .cloud.c1 { top: 12%; left: 8%; width: 14%; height: 3.2%; } |
| 41 | .cloud.c1::before { width: 60%; height: 200%; top: -90%; left: 15%; } |
| 42 | .cloud.c1::after { width: 45%; height: 160%; top: -55%; left: 48%; } |
| 43 | .cloud.c2 { top: 20%; right: 12%; width: 11%; height: 2.6%; opacity: 0.8; } |
| 44 | .cloud.c2::before { width: 55%; height: 190%; top: -80%; left: 18%; } |
| 45 | .cloud.c2::after { width: 42%; height: 150%; top: -50%; left: 50%; } |
| 46 | |
| 47 | /* 太阳 */ |
| 48 | .sun { |
| 49 | position: absolute; |
| 50 | top: 8%; |
| 51 | right: 7%; |
| 52 | width: 11%; |
| 53 | aspect-ratio: 1; |
| 54 | border-radius: 50%; |
| 55 | background: radial-gradient(circle, #FFF7B0 0%, #FFE15A 60%, #FEBB3E 100%); |
| 56 | box-shadow: 0 0 50px 12px rgba(255,235,120,0.6); |
| 57 | } |
| 58 | |
| 59 | /* 中央木马 + 标题区 */ |
| 60 | .stage { |
| 61 | position: absolute; |
| 62 | top: 50%; |
| 63 | left: 50%; |
| 64 | transform: translate(-50%, -52%); |
| 65 | text-align: center; |
| 66 | width: 70%; |
| 67 | } |
| 68 | .eyebrow { |
| 69 | display: inline-block; |
| 70 | background: #A6B0FF; |
| 71 | color: #FFFFFF; |
| 72 | font-size: clamp(10px, 1.1vw, 16px); |
| 73 | letter-spacing: 0.28em; |
| 74 | font-weight: 700; |
| 75 | padding: 5px 18px; |
| 76 | border-radius: 30px; |
| 77 | margin-bottom: 3%; |
| 78 | box-shadow: 0 4px 10px rgba(166,176,255,0.4); |
| 79 | } |
| 80 | .title { |
| 81 | font-size: clamp(56px, 10vw, 140px); |
| 82 | font-weight: 800; |
| 83 | line-height: 1; |
| 84 | letter-spacing: 0.06em; |
| 85 | text-shadow: 0 4px 0 rgba(0,0,0,0.12), 0 8px 20px rgba(180,80,0,0.35); |
| 86 | } |
| 87 | .title .green { color: #70D422; } |
| 88 | .title .orange { color: #FE7F08; } |
| 89 | .subtitle { |
| 90 | margin-top: 3%; |
| 91 | font-size: clamp(13px, 1.6vw, 23px); |
| 92 | font-weight: 600; |
| 93 | color: #FFFFFF; |
| 94 | opacity: 0.95; |
| 95 | letter-spacing: 0.1em; |
| 96 | text-shadow: 0 2px 6px rgba(180,80,0,0.3); |
| 97 | } |
| 98 | |
| 99 | /* 气球串 */ |
| 100 | .balloon { |
| 101 | position: absolute; |
| 102 | width: clamp(26px, 3vw, 44px); |
| 103 | aspect-ratio: 0.85; |
| 104 | border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%; |
| 105 | box-shadow: inset -4px -6px 8px rgba(0,0,0,0.12); |
| 106 | } |
| 107 | .balloon::after { |
| 108 | content: ""; position: absolute; bottom: -28px; left: 50%; |
| 109 | width: 1.5px; height: 28px; background: rgba(255,255,255,0.6); |
| 110 | } |
| 111 | .b1 { top: 30%; left: 6%; background: #FFADDD; } |
| 112 | .b2 { top: 38%; left: 11%; background: #A6B0FF; transform: scale(0.85); } |
| 113 | .b3 { top: 28%; right: 5%; background: #FFF061; } |
| 114 | .b4 { top: 36%; right: 10%; background: #70D422; transform: scale(0.8); } |
| 115 | |
| 116 | /* 纸飞机 */ |
| 117 | .plane { |
| 118 | position: absolute; |
| 119 | width: 0; height: 0; |
| 120 | border-style: solid; |
| 121 | } |
| 122 | .plane.p1 { |
| 123 | top: 42%; left: 20%; |
| 124 | border-width: 0 12px 18px 12px; |
| 125 | border-color: transparent transparent #FFFFFF transparent; |
| 126 | transform: rotate(-15deg); |
| 127 | filter: drop-shadow(0 3px 3px rgba(0,0,0,0.15)); |
| 128 | } |
| 129 | .plane.p2 { |
| 130 | top: 35%; right: 22%; |
| 131 | border-width: 0 9px 14px 9px; |
| 132 | border-color: transparent transparent #FFFFFF transparent; |
| 133 | transform: rotate(20deg) scale(0.75); |
| 134 | opacity: 0.85; |
| 135 | } |
| 136 | |
| 137 | /* 色卡 */ |
| 138 | .palette { |
| 139 | position: absolute; |
| 140 | left: 50%; |
| 141 | bottom: 4%; |
| 142 | transform: translateX(-50%); |
| 143 | display: flex; |
| 144 | gap: clamp(8px, 1.2vw, 18px); |
| 145 | } |
| 146 | .sw { |
| 147 | width: clamp(28px, 3.4vw, 50px); |
| 148 | aspect-ratio: 1; |
| 149 | border-radius: 50%; |
| 150 | box-shadow: 0 4px 10px rgba(120,50,0,0.2); |
| 151 | border: 3px solid rgba(255,255,255,0.9); |
| 152 | } |
| 153 | </style> |
| 154 | </head> |
| 155 | <body> |
| 156 | <div class="slide"> |
| 157 | <div class="sun"></div> |
| 158 | <div class="cloud c1"></div> |
| 159 | <div class="cloud c2"></div> |
| 160 | <div class="grass"></div> |
| 161 | |
| 162 | <div class="balloon b1"></div> |
| 163 | <div class="balloon b2"></div> |
| 164 | <div class="balloon b3"></div> |
| 165 | <div class="balloon b4"></div> |
| 166 | |
| 167 | <div class="plane p1"></div> |
| 168 | <div class="plane p2"></div> |
| 169 | |
| 170 | <div class="stage"> |
| 171 | <div class="eyebrow">CHILDREN'S DAY</div> |
| 172 | <h1 class="title"><span class="green">童趣</span><span class="orange">世界</span></h1> |
| 173 | <div class="subtitle">把整个夏天的快乐，都装进这一天</div> |
| 174 | </div> |
| 175 | |
| 176 | <div class="palette"> |
| 177 | <div class="sw" style="background:#FF7F00"></div> |
| 178 | <div class="sw" style="background:#FEBB3E"></div> |
| 179 | <div class="sw" style="background:#70D422"></div> |
| 180 | <div class="sw" style="background:#FFADDD"></div> |
| 181 | <div class="sw" style="background:#A6B0FF"></div> |
| 182 | </div> |
| 183 | </div> |
| 184 | </body> |
| 185 | </html> |
| 186 |