| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh-CN"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8" /> |
| 5 | <title>Logo Outro · HTML Anything</title> |
| 6 | <script src="https://cdn.tailwindcss.com"></script> |
| 7 | <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;700;800;900&family=Inter:wght@400;500&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet" /> |
| 8 | <style> |
| 9 | body { |
| 10 | font-family:'Inter Tight','Noto Sans SC',system-ui,sans-serif; |
| 11 | background: radial-gradient(circle at 50% 45%, #1a1535 0%, #08090c 70%); |
| 12 | color:#f5f5f7; |
| 13 | margin:0; |
| 14 | min-height:100vh; |
| 15 | overflow:hidden; |
| 16 | } |
| 17 | .accent { color:#7c5cff; } |
| 18 | .ribbon { background:#7c5cff; } |
| 19 | @keyframes pieceIn { 0% { opacity:0; transform: scale(1.4) translate(var(--dx, 0), var(--dy, 0)) } 100% { opacity:1; transform: scale(1) translate(0,0) } } |
| 20 | @keyframes glow { from { filter: drop-shadow(0 0 0 transparent) } to { filter: drop-shadow(0 0 32px rgba(124,92,255,0.6)) } } |
| 21 | .piece { animation: pieceIn 1s cubic-bezier(.34,1.56,.64,1) both; } |
| 22 | .piece:nth-child(1){--dx:-80px;--dy:-40px;animation-delay:0s} |
| 23 | .piece:nth-child(2){--dx:60px;--dy:-50px;animation-delay:.08s} |
| 24 | .piece:nth-child(3){--dx:-40px;--dy:50px;animation-delay:.16s} |
| 25 | .piece:nth-child(4){--dx:70px;--dy:40px;animation-delay:.24s} |
| 26 | .piece:nth-child(5){--dx:0;--dy:-70px;animation-delay:.32s} |
| 27 | .logo-wrap { animation: glow .8s ease-out 1.1s both; } |
| 28 | @keyframes fadeUp { from { opacity:0; transform: translateY(20px) } to { opacity:1; transform: translateY(0) } } |
| 29 | .brand { animation: fadeUp .8s ease-out 1.4s both; } |
| 30 | .tagline { animation: fadeUp .8s ease-out 1.7s both; } |
| 31 | .meta { animation: fadeUp .6s ease-out 2.1s both; } |
| 32 | /* shimmer */ |
| 33 | @keyframes shimmer { 0% { background-position:-200% 0 } 100% { background-position:200% 0 } } |
| 34 | .shimmer { |
| 35 | background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%); |
| 36 | background-size: 200% 100%; |
| 37 | -webkit-background-clip:text; background-clip:text; color:transparent; |
| 38 | animation: shimmer 1.8s ease-out 1.9s 1 both; |
| 39 | } |
| 40 | </style> |
| 41 | </head> |
| 42 | <body class="flex flex-col items-center justify-center relative"> |
| 43 | <div class="ribbon absolute top-0 left-0 right-0" style="height:4px"></div> |
| 44 | |
| 45 | <!-- logo --> |
| 46 | <div class="logo-wrap relative" style="width:140px;height:140px"> |
| 47 | <svg viewBox="0 0 140 140" class="absolute inset-0"> |
| 48 | <!-- 5 geometric pieces forming an "H" --> |
| 49 | <rect class="piece" x="20" y="20" width="20" height="100" fill="#7c5cff"/> |
| 50 | <rect class="piece" x="100" y="20" width="20" height="100" fill="#7c5cff"/> |
| 51 | <rect class="piece" x="40" y="60" width="60" height="20" fill="#f5f5f7"/> |
| 52 | <circle class="piece" cx="30" cy="20" r="10" fill="#7c5cff"/> |
| 53 | <circle class="piece" cx="110" cy="120" r="10" fill="#f5f5f7"/> |
| 54 | </svg> |
| 55 | </div> |
| 56 | |
| 57 | <!-- brand --> |
| 58 | <h1 class="brand mt-10 font-black tracking-[-0.02em] leading-[0.95]" style="font-size:84px"> |
| 59 | <span class="shimmer">HTML Anything</span> |
| 60 | </h1> |
| 61 | |
| 62 | <!-- tagline --> |
| 63 | <p class="tagline mt-4 text-[24px] opacity-70 font-medium"> |
| 64 | Anything → <em class="not-italic accent">beautiful HTML</em> |
| 65 | </p> |
| 66 | |
| 67 | <!-- CTA / meta --> |
| 68 | <div class="meta mt-12 flex items-center gap-6 text-[11px] uppercase tracking-[0.18em] opacity-50"> |
| 69 | <span>htmlanything.dev</span> |
| 70 | <span class="opacity-40">·</span> |
| 71 | <span>@htmlanything</span> |
| 72 | <span class="opacity-40">·</span> |
| 73 | <span>2026</span> |
| 74 | </div> |
| 75 | |
| 76 | <!-- corner timecode --> |
| 77 | <div class="absolute bottom-8 right-12 text-[10px] font-mono opacity-30 uppercase tracking-[0.18em]">END · 00:03:21</div> |
| 78 | <div class="absolute bottom-8 left-12 text-[10px] font-mono opacity-30 uppercase tracking-[0.18em]">FRAME · LOGO-OUTRO</div> |
| 79 | </body> |
| 80 | </html> |
| 81 |