Michael Jackson \u2014 \u6d41\u884c\u97f3\u4e50\u4e4b\u738b<\/title>\n<style>\n \/* ===================== \u57fa\u7840 ===================== *\/\n :root{\n --gold:#d4af37;\n --gold-light:#f5d77a;\n --gold-deep:#9c7a1c;\n --bg:#0a0a0c;\n --bg-soft:#141418;\n --bg-card:#16161c;\n --txt:#ece9e2;\n --txt-dim:#a7a39a;\n --line:rgba(212,175,55,.18);\n }\n *{margin:0;padding:0;box-sizing:border-box}\n html{scroll-behavior:smooth}\n body{\n font-family:\"Segoe UI\",\"PingFang SC\",\"Microsoft YaHei\",system-ui,sans-serif;\n background:var(--bg);\n color:var(--txt);\n line-height:1.7;\n overflow-x:hidden;\n -webkit-font-smoothing:antialiased;\n }\n a{color:inherit;text-decoration:none}\n img{max-width:100%;display:block}\n .wrap{width:min(1120px,92%);margin:0 auto}\n\n \/* ===================== \u5bfc\u822a ===================== *\/\n .nav{\n position:fixed;top:0;left:0;right:0;z-index:50;\n background:rgba(10,10,12,.6);\n backdrop-filter:blur(12px);\n border-bottom:1px solid var(--line);\n transition:.3s;\n }\n .nav.scrolled{background:rgba(10,10,12,.92)}\n .nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}\n .brand{font-weight:800;letter-spacing:1px;font-size:18px}\n .brand span{color:var(--gold)}\n .menu{display:flex;gap:28px;list-style:none}\n .menu a{font-size:14px;color:var(--txt-dim);transition:.2s;position:relative}\n .menu a:hover{color:var(--gold)}\n .menu a::after{content:\"\";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--gold);transition:.25s}\n .menu a:hover::after{width:100%}\n .burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:0}\n .burger span{width:24px;height:2px;background:var(--txt);transition:.3s}\n\n \/* ===================== Hero ===================== *\/\n .hero{\n position:relative;min-height:100vh;display:grid;place-items:center;\n text-align:center;overflow:hidden;\n background:\n radial-gradient(circle at 50% -10%, rgba(212,175,55,.22), transparent 55%),\n radial-gradient(circle at 18% 90%, rgba(212,175,55,.10), transparent 45%),\n radial-gradient(circle at 82% 80%, rgba(180,140,30,.10), transparent 45%),\n var(--bg);\n }\n \/* \u805a\u5149\u706f\u5149\u67f1 *\/\n .spot{position:absolute;top:-10%;width:46vw;height:130vh;\n background:linear-gradient(180deg, rgba(245,215,122,.18), transparent 70%);\n filter:blur(8px);transform-origin:top center;pointer-events:none}\n .spot.l{left:5%;transform:rotate(8deg);animation:sway 9s ease-in-out infinite}\n .spot.r{right:5%;transform:rotate(-8deg);animation:sway 9s ease-in-out infinite reverse}\n @keyframes sway{50%{transform:rotate(0deg)}}\n\n .hero-inner{position:relative;z-index:2;padding:0 20px}\n .hero .kicker{\n display:inline-block;letter-spacing:6px;text-transform:uppercase;\n font-size:13px;color:var(--gold);border:1px solid var(--line);\n padding:6px 18px;border-radius:999px;margin-bottom:28px;\n background:rgba(212,175,55,.06);\n }\n .hero h1{\n font-size:clamp(48px,11vw,150px);font-weight:900;line-height:.92;\n letter-spacing:-2px;\n background:linear-gradient(180deg,#fff 0%,var(--gold-light) 45%,var(--gold) 70%,var(--gold-deep) 100%);\n -webkit-background-clip:text;background-clip:text;color:transparent;\n text-shadow:0 0 60px rgba(212,175,55,.25);\n }\n .hero .title-tag{font-size:clamp(18px,3vw,30px);font-weight:300;color:var(--txt-dim);\n margin-top:14px;letter-spacing:4px}\n .hero .title-tag b{color:var(--gold);font-weight:600}\n .hero .years{margin-top:26px;font-size:15px;color:var(--txt-dim);letter-spacing:3px}\n .hero .years .dash{color:var(--gold)}\n .hero-cta{margin-top:40px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}\n .btn{\n display:inline-flex;align-items:center;gap:8px;padding:14px 30px;border-radius:999px;\n font-weight:600;font-size:15px;transition:.25s;cursor:pointer;border:1px solid transparent;\n }\n .btn-gold{background:linear-gradient(135deg,var(--gold-light),var(--gold) 60%,var(--gold-deep));\n color:#1a1400;box-shadow:0 10px 30px rgba(212,175,55,.3)}\n .btn-gold:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(212,175,55,.45)}\n .btn-ghost{border-color:var(--line);color:var(--txt)}\n .btn-ghost:hover{border-color:var(--gold);color:var(--gold)}\n .scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);\n color:var(--txt-dim);font-size:12px;letter-spacing:2px;animation:bob 2s infinite}\n @keyframes bob{50%{transform:translate(-50%,8px);opacity:.5}}\n\n \/* ===================== \u901a\u7528\u533a\u5757 ===================== *\/\n section{padding:100px 0;position:relative}\n .sec-head{text-align:center;max-width:720px;margin:0 auto 64px}\n .sec-head .eyebrow{color:var(--gold);letter-spacing:4px;text-transform:uppercase;\n font-size:13px;font-weight:600}\n .sec-head h2{font-size:clamp(30px,5vw,48px);font-weight:800;margin:12px 0 0;line-height:1.15}\n .sec-head p{color:var(--txt-dim);margin-top:16px}\n\n \/* ===================== \u5173\u4e8e ===================== *\/\n .about-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:60px;align-items:center}\n .portrait{\n aspect-ratio:3\/4;border-radius:18px;position:relative;overflow:hidden;\n background:\n radial-gradient(circle at 50% 30%, rgba(245,215,122,.35), transparent 60%),\n linear-gradient(160deg,#241f12,#0c0c0e);\n border:1px solid var(--line);\n display:grid;place-items:center;\n box-shadow:0 30px 80px rgba(0,0,0,.5);\n }\n .portrait svg{width:55%;height:auto;opacity:.92}\n .portrait::after{content:\"\";position:absolute;inset:0;\n background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.6))}\n .portrait .ptag{position:absolute;bottom:18px;left:20px;z-index:2;font-size:12px;\n letter-spacing:3px;color:var(--gold)}\n .about-text p{margin-bottom:18px;color:var(--txt-dim)}\n .about-text p:first-child{color:var(--txt);font-size:20px;font-weight:500}\n .about-text strong{color:var(--gold)}\n .sig{font-family:\"Brush Script MT\",cursive;color:var(--gold);font-size:34px;\n margin-top:20px;display:inline-block;transform:rotate(-4deg)}\n\n \/* ===================== \u6570\u636e ===================== *\/\n .stats{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}\n .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center}\n .stat .num{font-size:clamp(34px,5vw,56px);font-weight:900;\n background:linear-gradient(180deg,var(--gold-light),var(--gold-deep));\n -webkit-background-clip:text;background-clip:text;color:transparent}\n .stat .lbl{color:var(--txt-dim);font-size:14px;margin-top:8px;letter-spacing:1px}\n\n \/* ===================== \u4e13\u8f91 ===================== *\/\n .album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:28px}\n .album{background:var(--bg-card);border:1px solid var(--line);border-radius:16px;\n overflow:hidden;transition:.3s;cursor:pointer}\n .album:hover{transform:translateY(-8px);border-color:var(--gold);\n box-shadow:0 20px 50px rgba(0,0,0,.5)}\n .cover{aspect-ratio:1;position:relative;display:grid;place-items:center;\n font-weight:900;font-size:20px;letter-spacing:2px;color:#fff;text-align:center;\n padding:20px;overflow:hidden}\n .cover .yr{position:absolute;top:12px;right:14px;font-size:12px;font-weight:600;\n background:rgba(0,0,0,.4);padding:3px 10px;border-radius:999px;backdrop-filter:blur(4px)}\n .album-info{padding:18px 20px}\n .album-info h3{font-size:18px;font-weight:700}\n .album-info p{color:var(--txt-dim);font-size:13px;margin-top:4px}\n\n \/* ===================== \u65f6\u95f4\u7ebf ===================== *\/\n .tl{max-width:820px;margin:0 auto;position:relative;padding-left:34px}\n .tl::before{content:\"\";position:absolute;left:8px;top:6px;bottom:6px;width:2px;\n background:linear-gradient(180deg,var(--gold),transparent)}\n .tl-item{position:relative;padding-bottom:42px}\n .tl-item:last-child{padding-bottom:0}\n .tl-item::before{content:\"\";position:absolute;left:-33px;top:4px;width:18px;height:18px;\n border-radius:50%;background:var(--bg);border:3px solid var(--gold);\n box-shadow:0 0 0 4px rgba(212,175,55,.15)}\n .tl-item .year{color:var(--gold);font-weight:800;font-size:20px}\n .tl-item h4{font-size:17px;margin:4px 0 6px}\n .tl-item p{color:var(--txt-dim);font-size:15px}\n\n \/* ===================== \u5f15\u8a00 ===================== *\/\n .quote{text-align:center;max-width:860px;margin:0 auto;position:relative;padding:40px 0}\n .quote .mark{font-size:120px;color:var(--gold);opacity:.25;line-height:0;\n font-family:Georgia,serif;display:block;height:50px}\n .quote blockquote{font-size:clamp(22px,3.4vw,34px);font-weight:300;font-style:italic;\n line-height:1.5;color:var(--txt)}\n .quote cite{display:block;margin-top:22px;color:var(--gold);letter-spacing:2px;\n font-style:normal;font-size:14px}\n\n \/* ===================== \u9057\u4ea7 ===================== *\/\n .legacy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}\n .leg-card{background:var(--bg-card);border:1px solid var(--line);border-radius:16px;\n padding:34px 28px;transition:.3s}\n .leg-card:hover{border-color:var(--gold);transform:translateY(-6px)}\n .leg-card .ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;\n background:rgba(212,175,55,.12);color:var(--gold);margin-bottom:18px}\n .leg-card h3{font-size:19px;margin-bottom:10px}\n .leg-card p{color:var(--txt-dim);font-size:15px}\n\n \/* ===================== \u9875\u811a ===================== *\/\n footer{background:var(--bg-soft);border-top:1px solid var(--line);padding:50px 0 30px;text-align:center}\n footer .brand{display:inline-block;margin-bottom:14px}\n footer p{color:var(--txt-dim);font-size:14px;max-width:520px;margin:0 auto}\n .stars{color:var(--gold);letter-spacing:10px;font-size:14px;margin:0 0 10px}\n\n \/* ===================== \u6eda\u52a8\u6e10\u663e ===================== *\/\n .reveal{opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .7s ease}\n .reveal.in{opacity:1;transform:none}\n\n \/* ===================== \u54cd\u5e94\u5f0f ===================== *\/\n @media(max-width:860px){\n .menu{position:fixed;top:64px;left:0;right:0;background:rgba(10,10,12,.98);\n flex-direction:column;gap:0;padding:10px 0;border-bottom:1px solid var(--line);\n transform:translateY(-150%);transition:.35s}\n .menu.open{transform:none}\n .menu a{display:block;padding:14px 24px}\n .burger{display:flex}\n .about-grid{grid-template-columns:1fr;gap:36px}\n .stats-grid{grid-template-columns:repeat(2,1fr);gap:36px 20px}\n .legacy-grid{grid-template-columns:1fr}\n section{padding:70px 0}\n }\n<\/style>\n<\/head>\n<body>\n\n\n<nav class=\"nav\" id=\"nav\">\n <div class=\"wrap nav-inner\">\n <a href=\"#top\" class=\"brand\">MICHAEL <span>JACKSON<\/span><\/a>\n <ul class=\"menu\" id=\"menu\">\n <li><a href=\"#about\">\u7b80\u4ecb<\/a><\/li>\n <li><a href=\"#stats\">\u6210\u5c31<\/a><\/li>\n <li><a href=\"#albums\">\u7ecf\u5178\u4e13\u8f91<\/a><\/li>\n <li><a href=\"#timeline\">\u65f6\u95f4\u7ebf<\/a><\/li>\n <li><a href=\"#legacy\">\u5f71\u54cd<\/a><\/li>\n <\/ul>\n <button class=\"burger\" id=\"burger\" aria-label=\"\u83dc\u5355\"><span><\/span><span><\/span><span><\/span><\/button>\n <\/div>\n<\/nav>\n\n\n<header class=\"hero\" id=\"top\">\n <div class=\"spot l\"><\/div>\n <div class=\"spot r\"><\/div>\n <div class=\"hero-inner\">\n <span class=\"kicker\">King of Pop<\/span>\n <h1>MICHAEL<br>JACKSON<\/h1>\n <p class=\"title-tag\">\u6d41 \u00b7 \u884c \u00b7 \u97f3 \u00b7 \u4e50 \u00b7 \u4e4b \u00b7 <b>\u738b<\/b><\/p>\n <p class=\"years\">1958 <span class=\"dash\">\u2014<\/span> 2009<\/p>\n <div class=\"hero-cta\">\n <a href=\"#about\" class=\"btn btn-gold\">\u4e86\u89e3\u4ed6\u7684\u6545\u4e8b \u2192<\/a>\n <a href=\"#albums\" class=\"btn btn-ghost\">\u7ecf\u5178\u4f5c\u54c1<\/a>\n <\/div>\n <\/div>\n <div class=\"scroll-hint\">SCROLL \u2193<\/div>\n<\/header>\n\n\n<section id=\"about\">\n <div class=\"wrap about-grid\">\n <div class=\"portrait reveal\">\n \n <svg viewBox=\"0 0 200 260\" aria-hidden=\"true\">\n <defs>\n <linearGradient id=\"g1\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0\" stop-color=\"#2a2316\"\/>\n <stop offset=\"1\" stop-color=\"#0a0a0c\"\/>\n <\/linearGradient>\n <\/defs>\n \n <ellipse cx=\"100\" cy=\"70\" rx=\"92\" ry=\"20\" fill=\"#d4af37\" opacity=\".25\"\/>\n <rect x=\"60\" y=\"18\" width=\"80\" height=\"56\" rx=\"8\" fill=\"url(#g1)\"\/>\n <rect x=\"48\" y=\"62\" width=\"104\" height=\"14\" rx=\"4\" fill=\"#1a1a1f\"\/>\n <rect x=\"60\" y=\"64\" width=\"80\" height=\"6\" fill=\"#d4af37\" opacity=\".7\"\/>\n \n <circle cx=\"100\" cy=\"110\" r=\"34\" fill=\"url(#g1)\"\/>\n <path d=\"M40 250 Q100 150 160 250 Z\" fill=\"url(#g1)\"\/>\n \n <path d=\"M68 96 Q72 86 80 90\" stroke=\"#d4af37\" stroke-width=\"3\" fill=\"none\" opacity=\".7\"\/>\n <\/svg>\n <span class=\"ptag\">THE LEGEND<\/span>\n <\/div>\n <div class=\"about-text reveal\">\n <p>\u4ed6\u662f 20 \u4e16\u7eaa\u6700\u91cd\u8981\u7684\u6587\u5316\u5076\u50cf\u4e4b\u4e00,\u4ee5\u65e0\u4e0e\u4f26\u6bd4\u7684\u55d3\u97f3\u3001\u9769\u547d\u6027\u7684\u821e\u8e48\u548c\u5212\u65f6\u4ee3\u7684\u97f3\u4e50\u5f55\u5f71\u5e26\u91cd\u5851\u4e86\u6d41\u884c\u97f3\u4e50\u3002<\/p>\n <p><strong>\u8fc8\u514b\u5c14\u00b7\u7ea6\u745f\u592b\u00b7\u6770\u514b\u900a<\/strong>(Michael Joseph Jackson),1958 \u5e74 8 \u6708 29 \u65e5\u751f\u4e8e\u7f8e\u56fd\u5370\u7b2c\u5b89\u7eb3\u5dde\u52a0\u91cc\u5e02,\u81ea\u5e7c\u968f\u5bb6\u4eba\u7ec4\u6210 <strong>The Jackson 5<\/strong> \u767b\u53f0,\u5c11\u5e74\u6210\u540d\u3002\u4ed6\u878d\u5408\u653e\u514b\u3001\u6447\u6eda\u3001\u8fea\u65af\u79d1\u4e0e\u8282\u594f\u5e03\u9c81\u65af,\u628a\u6d41\u884c\u4e50\u63a8\u5411\u5168\u7403\u3002<\/p>\n <p>1982 \u5e74\u7684\u4e13\u8f91\u300aThriller\u300b\u81f3\u4eca\u4ecd\u662f\u4eba\u7c7b\u5386\u53f2\u4e0a\u9500\u91cf\u6700\u9ad8\u7684\u4e13\u8f91\u3002\u4ed6\u4ee5”\u592a\u7a7a\u6b65”(Moonwalk)\u3001\u53cd\u91cd\u529b\u503e\u659c\u7b49\u62db\u724c\u52a8\u4f5c,\u8ba9\u97f3\u4e50\u5f55\u5f71\u5e26\u6210\u4e3a\u4e00\u95e8\u72ec\u7acb\u827a\u672f\u3002<\/p>\n <p>\u5728\u97f3\u4e50\u4e4b\u5916,\u4ed6\u70ed\u5fc3\u516c\u76ca,\u66fe\u4ee5\u300aWe Are the World\u300b\u300aHeal the World\u300b\u7b49\u4f5c\u54c1\u547c\u5401\u548c\u5e73\u4e0e\u5173\u6000\u513f\u7ae5\u3002<\/p>\n <span class=\"sig\">Michael Jackson<\/span>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"stats\" class=\"stats\">\n <div class=\"wrap sec-head reveal\">\n <span class=\"eyebrow\">By the Numbers<\/span>\n <h2>\u60ca\u4eba\u7684\u6210\u5c31<\/h2>\n <p>\u8fd9\u4e9b\u6570\u5b57\u80cc\u540e,\u662f\u4e00\u4e2a\u65f6\u4ee3\u7684\u96c6\u4f53\u8bb0\u5fc6\u3002<\/p>\n <\/div>\n <div class=\"wrap stats-grid\">\n <div class=\"stat reveal\"><div class=\"num\" data-count=\"1\">1<\/div><div class=\"lbl\">\u53f2\u4e0a\u6700\u7545\u9500\u4e13\u8f91<\/div><\/div>\n <div class=\"stat reveal\"><div class=\"num\" data-count=\"400\" data-suffix=\"\u4ebf+\">0<\/div><div class=\"lbl\">\u5168\u7403\u5531\u7247\u9500\u91cf(\u4f30\u7b97)<\/div><\/div>\n <div class=\"stat reveal\"><div class=\"num\" data-count=\"13\">0<\/div><div class=\"lbl\">\u5ea7\u683c\u83b1\u7f8e\u5956<\/div><\/div>\n <div class=\"stat reveal\"><div class=\"num\" data-count=\"39\">0<\/div><div class=\"lbl\">\u9879\u5409\u5c3c\u65af\u4e16\u754c\u7eaa\u5f55<\/div><\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"albums\">\n <div class=\"wrap sec-head reveal\">\n <span class=\"eyebrow\">Discography<\/span>\n <h2>\u5b9a\u4e49\u65f6\u4ee3\u7684\u7ecf\u5178\u4e13\u8f91<\/h2>\n <p>\u6bcf\u4e00\u5f20\u90fd\u662f\u4e00\u5ea7\u91cc\u7a0b\u7891\u3002<\/p>\n <\/div>\n <div class=\"wrap album-grid\">\n <div class=\"album reveal\">\n <div class=\"cover\" style=\"background:linear-gradient(135deg,#b9a24d,#5c4a14)\">\n <span class=\"yr\">1979<\/span>OFF THE<br>WALL\n <\/div>\n <div class=\"album-info\"><h3>Off the Wall<\/h3><p>\u8fea\u65af\u79d1\u65f6\u4ee3\u7684\u7a81\u7834\u4e4b\u4f5c<\/p><\/div>\n <\/div>\n <div class=\"album reveal\">\n <div class=\"cover\" style=\"background:linear-gradient(135deg,#e8233a,#7a0f1c)\">\n <span class=\"yr\">1982<\/span>THRILLER\n <\/div>\n <div class=\"album-info\"><h3>Thriller<\/h3><p>\u53f2\u4e0a\u6700\u7545\u9500\u4e13\u8f91,\u6c38\u6052\u7ecf\u5178<\/p><\/div>\n <\/div>\n <div class=\"album reveal\">\n <div class=\"cover\" style=\"background:linear-gradient(135deg,#1a1a1a,#3a3a3a)\">\n <span class=\"yr\">1987<\/span>BAD\n <\/div>\n <div class=\"album-info\"><h3>Bad<\/h3><p>\u4e94\u9996\u5355\u66f2\u5168\u90e8\u767b\u9876 Billboard<\/p><\/div>\n <\/div>\n <div class=\"album reveal\">\n <div class=\"cover\" style=\"background:linear-gradient(135deg,#c9a227,#3d2e07)\">\n <span class=\"yr\">1991<\/span>DANGEROUS\n <\/div>\n <div class=\"album-info\"><h3>Dangerous<\/h3><p>New Jack Swing \u98ce\u683c\u8f6c\u578b<\/p><\/div>\n <\/div>\n <div class=\"album reveal\">\n <div class=\"cover\" style=\"background:linear-gradient(135deg,#2b5fa8,#0c2244)\">\n <span class=\"yr\">1995<\/span>HIStory\n <\/div>\n <div class=\"album-info\"><h3>HIStory<\/h3><p>\u53cc\u789f\u5de8\u5236,\u53cd\u601d\u4e0e\u5ba3\u8a00<\/p><\/div>\n <\/div>\n <div class=\"album reveal\">\n <div class=\"cover\" style=\"background:linear-gradient(135deg,#7a7a82,#1f1f24)\">\n <span class=\"yr\">2001<\/span>INVINCIBLE\n <\/div>\n <div class=\"album-info\"><h3>Invincible<\/h3><p>\u751f\u524d\u6700\u540e\u4e00\u5f20\u5f55\u97f3\u5ba4\u4e13\u8f91<\/p><\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"timeline\">\n <div class=\"wrap sec-head reveal\">\n <span class=\"eyebrow\">Timeline<\/span>\n <h2>\u4f20\u5947\u4e00\u751f<\/h2>\n <\/div>\n <div class=\"wrap\">\n <div class=\"tl\">\n <div class=\"tl-item reveal\"><div class=\"year\">1958<\/div><h4>\u51fa\u751f\u4e8e\u5370\u7b2c\u5b89\u7eb3\u5dde<\/h4><p>\u5bb6\u4e2d\u7684\u7b2c\u4e03\u4e2a\u5b69\u5b50,\u81ea\u5e7c\u663e\u9732\u97f3\u4e50\u5929\u8d4b\u3002<\/p><\/div>\n <div class=\"tl-item reveal\"><div class=\"year\">1968<\/div><h4>The Jackson 5 \u51fa\u9053<\/h4><p>\u4e0e\u5144\u5f1f\u7ec4\u6210\u4e50\u961f,\u5c0f\u5c0f\u5e74\u7eaa\u4fbf\u662f\u4e3b\u5531,\u4e00\u66f2\u6210\u540d\u3002<\/p><\/div>\n <div class=\"tl-item reveal\"><div class=\"year\">1979<\/div><h4>\u300aOff the Wall\u300b<\/h4><p>\u4e2a\u4eba\u4e8b\u4e1a\u8d77\u98de,\u4e0e\u5236\u4f5c\u4eba\u6606\u897f\u00b7\u743c\u65af\u5408\u4f5c\u3002<\/p><\/div>\n <div class=\"tl-item reveal\"><div class=\"year\">1982<\/div><h4>\u300aThriller\u300b\u95ee\u9f0e<\/h4><p>\u9500\u91cf\u5c01\u795e,\u97f3\u4e50\u5f55\u5f71\u5e26\u9769\u65b0\u6d41\u884c\u6587\u5316\u3002<\/p><\/div>\n <div class=\"tl-item reveal\"><div class=\"year\">1983<\/div><h4>\u9996\u6b21\u516c\u5f00”\u592a\u7a7a\u6b65”<\/h4><p>\u5728\u6469\u57ce 25 \u5468\u5e74\u665a\u4f1a\u4e0a\u8868\u6f14\u300aBillie Jean\u300b,\u8f7d\u5165\u53f2\u518c\u3002<\/p><\/div>\n <div class=\"tl-item reveal\"><div class=\"year\">1985<\/div><h4>\u300aWe Are the World\u300b<\/h4><p>\u8054\u5408\u7fa4\u661f\u4e3a\u975e\u6d32\u9965\u8352\u52df\u6350,\u516c\u76ca\u5178\u8303\u3002<\/p><\/div>\n <div class=\"tl-item reveal\"><div class=\"year\">1987<\/div><h4>\u300aBad\u300b\u5168\u7403\u5de1\u6f14<\/h4><p>\u5f00\u542f\u53f2\u4e0a\u89c4\u6a21\u6700\u5927\u7684\u4e16\u754c\u5de1\u56de\u6f14\u5531\u4f1a\u4e4b\u4e00\u3002<\/p><\/div>\n <div class=\"tl-item reveal\"><div class=\"year\">2009<\/div><h4>\u5de8\u661f\u9668\u843d<\/h4><p>6 \u6708 25 \u65e5\u8f9e\u4e16,\u5168\u7403\u4e50\u8ff7\u5171\u540c\u54c0\u60bc\u3002<\/p><\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section>\n <div class=\"wrap\">\n <div class=\"quote reveal\">\n <span class=\"mark\">“<\/span>\n <blockquote>\u6211\u4ece\u4e00\u4e2a\u666e\u901a\u5b69\u5b50\u8d77\u6b65,\u56e0\u4e3a\u70ed\u7231,\u6211\u52aa\u529b\u5b66\u4e60\u3001\u70ed\u7231\u9b54\u672f\u3001\u70ed\u7231\u7528\u97f3\u4e50\u4e3a\u4e16\u754c\u5e26\u6765\u6b22\u4e50\u3002<\/blockquote>\n <cite>\u2014 MICHAEL JACKSON<\/cite>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"legacy\">\n <div class=\"wrap sec-head reveal\">\n <span class=\"eyebrow\">Legacy<\/span>\n <h2>\u4e0d\u673d\u7684\u5f71\u54cd<\/h2>\n <p>\u4ed6\u7684\u827a\u672f\u8d85\u8d8a\u80a4\u8272\u3001\u8bed\u8a00\u4e0e\u56fd\u754c\u3002<\/p>\n <\/div>\n <div class=\"wrap legacy-grid\">\n <div class=\"leg-card reveal\">\n <div class=\"ico\">\n <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 3l2.5 5.5L20 9l-4 4 1 6-5-3-5 3 1-6-4-4 5.5-.5z\"\/><\/svg>\n <\/div>\n <h3>\u97f3\u4e50\u5f55\u5f71\u5e26\u4e4b\u7236<\/h3>\n <p>\u628a MV \u4ece\u5ba3\u4f20\u77ed\u7247\u5347\u534e\u4e3a\u53d9\u4e8b\u827a\u672f,\u300aThriller\u300b\u77ed\u7247\u81f3\u4eca\u88ab\u53cd\u590d\u81f4\u656c\u3002<\/p>\n <\/div>\n <div class=\"leg-card reveal\">\n <div class=\"ico\">\n <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M4 18s2-1 8-1 8 1 8 1M6 13c4 2 8 2 12 0M8 8c2 1.5 6 1.5 8 0\"\/><\/svg>\n <\/div>\n <h3>\u821e\u8e48\u7684\u9769\u547d\u8005<\/h3>\n <p>\u592a\u7a7a\u6b65\u3001\u673a\u68b0\u821e\u3001\u53cd\u91cd\u529b\u503e\u659c\u2014\u2014\u4ed6\u91cd\u65b0\u5b9a\u4e49\u4e86\u6d41\u884c\u821e\u53f0\u4e0a\u7684\u80a2\u4f53\u8bed\u8a00\u3002<\/p>\n <\/div>\n <div class=\"leg-card reveal\">\n <div class=\"ico\">\n <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 21s-7-4.5-9.5-9C.5 8 3 4 6.5 4c2 0 3.5 1.2 4.5 2.5C12 5.2 13.5 4 15.5 4 19 4 21.5 8 21.5 12 19 16.5 12 21 12 21z\"\/><\/svg>\n <\/div>\n <h3>\u8de8\u8d8a\u56fd\u754c\u7684\u5076\u50cf<\/h3>\n <p>\u6253\u7834\u79cd\u65cf\u58c1\u5792,\u6210\u4e3a\u9996\u6279\u5728 MTV \u5927\u91cf\u8f6e\u64ad\u7684\u9ed1\u4eba\u827a\u672f\u5bb6,\u5f71\u54cd\u529b\u904d\u53ca\u5168\u7403\u3002<\/p>\n <\/div>\n <\/div>\n<\/section>\n\n\n<footer>\n <div class=\"wrap\">\n <div class=\"stars\">\u2605 \u2605 \u2605<\/div>\n <a href=\"#top\" class=\"brand\">MICHAEL <span style=\"color:var(--gold)\">JACKSON<\/span><\/a>\n <p>\u7eaa\u5ff5\u6d41\u884c\u97f3\u4e50\u4e4b\u738b \u00b7 \u672c\u9875\u9762\u4e3a\u81f4\u656c\u6027\u4ecb\u7ecd,\u8d44\u6599\u636e\u516c\u5f00\u8bb0\u8f7d\u6574\u7406\u3002<\/p>\n <\/div>\n<\/footer>\n\n<script>\n \/\/ \u5bfc\u822a\u6eda\u52a8\u6548\u679c\n const nav=document.getElementById('nav');\n addEventListener('scroll',()=>nav.classList.toggle('scrolled',scrollY>30));\n\n \/\/ \u79fb\u52a8\u7aef\u83dc\u5355\n const burger=document.getElementById('burger'),menu=document.getElementById('menu');\n burger.addEventListener('click',()=>menu.classList.toggle('open'));\n menu.querySelectorAll('a').forEach(a=>a.addEventListener('click',()=>menu.classList.remove('open')));\n\n \/\/ \u6eda\u52a8\u6e10\u663e\n const io=new IntersectionObserver((es)=>{\n es.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target);}});\n },{threshold:.15});\n document.querySelectorAll('.reveal').forEach(el=>io.observe(el));\n\n \/\/ \u6570\u5b57\u6eda\u52a8\u52a8\u753b\n const nums=document.querySelectorAll('.stat .num');\n const counterIO=new IntersectionObserver((es)=>{\n es.forEach(e=>{\n if(!e.isIntersecting)return;\n const el=e.target,to=+el.dataset.count,suffix=el.dataset.suffix||'';\n const dur=1400,start=performance.now();\n function tick(now){\n const p=Math.min((now-start)\/dur,1);\n const val=Math.floor(p*to);\n el.textContent=val+(p===1?suffix:'');\n if(p<1)requestAnimationFrame(tick);\n }\n requestAnimationFrame(tick);\n counterIO.unobserve(el);\n });\n },{threshold:.5});\n nums.forEach(n=>counterIO.observe(n));\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>\u4ed6\u662f 20 \u4e16\u7eaa\u6700\u91cd\u8981\u7684\u6587\u5316\u5076\u50cf\u4e4b\u4e00,\u4ee5\u65e0\u4e0e\u4f26\u6bd4\u7684\u55d3\u97f3\u3001\u9769\u547d\u6027\u7684\u821e\u8e48\u548c\u5212\u65f6\u4ee3\u7684\u97f3\u4e50\u5f55\u5f71\u5e26\u91cd\u5851\u4e86\u6d41\u884c\u97f3\u4e50\u3002<\/p>\n","protected":false},"author":1,"featured_media":1838,"comment_status":"closed","ping_status":"open","sticky":false,"template":"html-full-article","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[39],"tags":[16],"class_list":["post-1834","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-39","tag-16"],"_links":{"self":[{"href":"https:\/\/qubitledge.com\/index.php\/wp-json\/wp\/v2\/posts\/1834","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qubitledge.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qubitledge.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qubitledge.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/qubitledge.com\/index.php\/wp-json\/wp\/v2\/comments?post=1834"}],"version-history":[{"count":3,"href":"https:\/\/qubitledge.com\/index.php\/wp-json\/wp\/v2\/posts\/1834\/revisions"}],"predecessor-version":[{"id":1839,"href":"https:\/\/qubitledge.com\/index.php\/wp-json\/wp\/v2\/posts\/1834\/revisions\/1839"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qubitledge.com\/index.php\/wp-json\/wp\/v2\/media\/1838"}],"wp:attachment":[{"href":"https:\/\/qubitledge.com\/index.php\/wp-json\/wp\/v2\/media?parent=1834"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qubitledge.com\/index.php\/wp-json\/wp\/v2\/categories?post=1834"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qubitledge.com\/index.php\/wp-json\/wp\/v2\/tags?post=1834"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1834,"date":"2026-07-16T21:39:52","date_gmt":"2026-07-16T13:39:52","guid":{"rendered":"https:\/\/qubitledge.com\/?p=1834"},"modified":"2026-07-16T21:42:15","modified_gmt":"2026-07-16T13:42:15","slug":"1834","status":"publish","type":"post","link":"https:\/\/qubitledge.com\/index.php\/2026\/07\/16\/1834\/","title":{"rendered":"MICHAEL JACKSON-\u6d41\u884c\u97f3\u4e50\u4e4b\u738b"},"content":{"rendered":"\n

<\/p>\n\n\n\n\n\n\n\n\n\nMichael Jackson \u2014 \u6d41\u884c\u97f3\u4e50\u4e4b\u738b<\/title>\n<style>\n \/* ===================== \u57fa\u7840 ===================== *\/\n :root{\n --gold:#d4af37;\n --gold-light:#f5d77a;\n --gold-deep:#9c7a1c;\n --bg:#0a0a0c;\n --bg-soft:#141418;\n --bg-card:#16161c;\n --txt:#ece9e2;\n --txt-dim:#a7a39a;\n --line:rgba(212,175,55,.18);\n }\n *{margin:0;padding:0;box-sizing:border-box}\n html{scroll-behavior:smooth}\n body{\n font-family:\"Segoe UI\",\"PingFang SC\",\"Microsoft YaHei\",system-ui,sans-serif;\n background:var(--bg);\n color:var(--txt);\n line-height:1.7;\n overflow-x:hidden;\n -webkit-font-smoothing:antialiased;\n }\n a{color:inherit;text-decoration:none}\n img{max-width:100%;display:block}\n .wrap{width:min(1120px,92%);margin:0 auto}\n\n \/* ===================== \u5bfc\u822a ===================== *\/\n .nav{\n position:fixed;top:0;left:0;right:0;z-index:50;\n background:rgba(10,10,12,.6);\n backdrop-filter:blur(12px);\n border-bottom:1px solid var(--line);\n transition:.3s;\n }\n .nav.scrolled{background:rgba(10,10,12,.92)}\n .nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}\n .brand{font-weight:800;letter-spacing:1px;font-size:18px}\n .brand span{color:var(--gold)}\n .menu{display:flex;gap:28px;list-style:none}\n .menu a{font-size:14px;color:var(--txt-dim);transition:.2s;position:relative}\n .menu a:hover{color:var(--gold)}\n .menu a::after{content:\"\";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--gold);transition:.25s}\n .menu a:hover::after{width:100%}\n .burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:0}\n .burger span{width:24px;height:2px;background:var(--txt);transition:.3s}\n\n \/* ===================== Hero ===================== *\/\n .hero{\n position:relative;min-height:100vh;display:grid;place-items:center;\n text-align:center;overflow:hidden;\n background:\n radial-gradient(circle at 50% -10%, rgba(212,175,55,.22), transparent 55%),\n radial-gradient(circle at 18% 90%, rgba(212,175,55,.10), transparent 45%),\n radial-gradient(circle at 82% 80%, rgba(180,140,30,.10), transparent 45%),\n var(--bg);\n }\n \/* \u805a\u5149\u706f\u5149\u67f1 *\/\n .spot{position:absolute;top:-10%;width:46vw;height:130vh;\n background:linear-gradient(180deg, rgba(245,215,122,.18), transparent 70%);\n filter:blur(8px);transform-origin:top center;pointer-events:none}\n .spot.l{left:5%;transform:rotate(8deg);animation:sway 9s ease-in-out infinite}\n .spot.r{right:5%;transform:rotate(-8deg);animation:sway 9s ease-in-out infinite reverse}\n @keyframes sway{50%{transform:rotate(0deg)}}\n\n .hero-inner{position:relative;z-index:2;padding:0 20px}\n .hero .kicker{\n display:inline-block;letter-spacing:6px;text-transform:uppercase;\n font-size:13px;color:var(--gold);border:1px solid var(--line);\n padding:6px 18px;border-radius:999px;margin-bottom:28px;\n background:rgba(212,175,55,.06);\n }\n .hero h1{\n font-size:clamp(48px,11vw,150px);font-weight:900;line-height:.92;\n letter-spacing:-2px;\n background:linear-gradient(180deg,#fff 0%,var(--gold-light) 45%,var(--gold) 70%,var(--gold-deep) 100%);\n -webkit-background-clip:text;background-clip:text;color:transparent;\n text-shadow:0 0 60px rgba(212,175,55,.25);\n }\n .hero .title-tag{font-size:clamp(18px,3vw,30px);font-weight:300;color:var(--txt-dim);\n margin-top:14px;letter-spacing:4px}\n .hero .title-tag b{color:var(--gold);font-weight:600}\n .hero .years{margin-top:26px;font-size:15px;color:var(--txt-dim);letter-spacing:3px}\n .hero .years .dash{color:var(--gold)}\n .hero-cta{margin-top:40px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}\n .btn{\n display:inline-flex;align-items:center;gap:8px;padding:14px 30px;border-radius:999px;\n font-weight:600;font-size:15px;transition:.25s;cursor:pointer;border:1px solid transparent;\n }\n .btn-gold{background:linear-gradient(135deg,var(--gold-light),var(--gold) 60%,var(--gold-deep));\n color:#1a1400;box-shadow:0 10px 30px rgba(212,175,55,.3)}\n .btn-gold:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(212,175,55,.45)}\n .btn-ghost{border-color:var(--line);color:var(--txt)}\n .btn-ghost:hover{border-color:var(--gold);color:var(--gold)}\n .scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);\n color:var(--txt-dim);font-size:12px;letter-spacing:2px;animation:bob 2s infinite}\n @keyframes bob{50%{transform:translate(-50%,8px);opacity:.5}}\n\n \/* ===================== \u901a\u7528\u533a\u5757 ===================== *\/\n section{padding:100px 0;position:relative}\n .sec-head{text-align:center;max-width:720px;margin:0 auto 64px}\n .sec-head .eyebrow{color:var(--gold);letter-spacing:4px;text-transform:uppercase;\n font-size:13px;font-weight:600}\n .sec-head h2{font-size:clamp(30px,5vw,48px);font-weight:800;margin:12px 0 0;line-height:1.15}\n .sec-head p{color:var(--txt-dim);margin-top:16px}\n\n \/* ===================== \u5173\u4e8e ===================== *\/\n .about-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:60px;align-items:center}\n .portrait{\n aspect-ratio:3\/4;border-radius:18px;position:relative;overflow:hidden;\n background:\n radial-gradient(circle at 50% 30%, rgba(245,215,122,.35), transparent 60%),\n linear-gradient(160deg,#241f12,#0c0c0e);\n border:1px solid var(--line);\n display:grid;place-items:center;\n box-shadow:0 30px 80px rgba(0,0,0,.5);\n }\n .portrait svg{width:55%;height:auto;opacity:.92}\n .portrait::after{content:\"\";position:absolute;inset:0;\n background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.6))}\n .portrait .ptag{position:absolute;bottom:18px;left:20px;z-index:2;font-size:12px;\n letter-spacing:3px;color:var(--gold)}\n .about-text p{margin-bottom:18px;color:var(--txt-dim)}\n .about-text p:first-child{color:var(--txt);font-size:20px;font-weight:500}\n .about-text strong{color:var(--gold)}\n .sig{font-family:\"Brush Script MT\",cursive;color:var(--gold);font-size:34px;\n margin-top:20px;display:inline-block;transform:rotate(-4deg)}\n\n \/* ===================== \u6570\u636e ===================== *\/\n .stats{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}\n .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center}\n .stat .num{font-size:clamp(34px,5vw,56px);font-weight:900;\n background:linear-gradient(180deg,var(--gold-light),var(--gold-deep));\n -webkit-background-clip:text;background-clip:text;color:transparent}\n .stat .lbl{color:var(--txt-dim);font-size:14px;margin-top:8px;letter-spacing:1px}\n\n \/* ===================== \u4e13\u8f91 ===================== *\/\n .album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:28px}\n .album{background:var(--bg-card);border:1px solid var(--line);border-radius:16px;\n overflow:hidden;transition:.3s;cursor:pointer}\n .album:hover{transform:translateY(-8px);border-color:var(--gold);\n box-shadow:0 20px 50px rgba(0,0,0,.5)}\n .cover{aspect-ratio:1;position:relative;display:grid;place-items:center;\n font-weight:900;font-size:20px;letter-spacing:2px;color:#fff;text-align:center;\n padding:20px;overflow:hidden}\n .cover .yr{position:absolute;top:12px;right:14px;font-size:12px;font-weight:600;\n background:rgba(0,0,0,.4);padding:3px 10px;border-radius:999px;backdrop-filter:blur(4px)}\n .album-info{padding:18px 20px}\n .album-info h3{font-size:18px;font-weight:700}\n .album-info p{color:var(--txt-dim);font-size:13px;margin-top:4px}\n\n \/* ===================== \u65f6\u95f4\u7ebf ===================== *\/\n .tl{max-width:820px;margin:0 auto;position:relative;padding-left:34px}\n .tl::before{content:\"\";position:absolute;left:8px;top:6px;bottom:6px;width:2px;\n background:linear-gradient(180deg,var(--gold),transparent)}\n .tl-item{position:relative;padding-bottom:42px}\n .tl-item:last-child{padding-bottom:0}\n .tl-item::before{content:\"\";position:absolute;left:-33px;top:4px;width:18px;height:18px;\n border-radius:50%;background:var(--bg);border:3px solid var(--gold);\n box-shadow:0 0 0 4px rgba(212,175,55,.15)}\n .tl-item .year{color:var(--gold);font-weight:800;font-size:20px}\n .tl-item h4{font-size:17px;margin:4px 0 6px}\n .tl-item p{color:var(--txt-dim);font-size:15px}\n\n \/* ===================== \u5f15\u8a00 ===================== *\/\n .quote{text-align:center;max-width:860px;margin:0 auto;position:relative;padding:40px 0}\n .quote .mark{font-size:120px;color:var(--gold);opacity:.25;line-height:0;\n font-family:Georgia,serif;display:block;height:50px}\n .quote blockquote{font-size:clamp(22px,3.4vw,34px);font-weight:300;font-style:italic;\n line-height:1.5;color:var(--txt)}\n .quote cite{display:block;margin-top:22px;color:var(--gold);letter-spacing:2px;\n font-style:normal;font-size:14px}\n\n \/* ===================== \u9057\u4ea7 ===================== *\/\n .legacy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}\n .leg-card{background:var(--bg-card);border:1px solid var(--line);border-radius:16px;\n padding:34px 28px;transition:.3s}\n .leg-card:hover{border-color:var(--gold);transform:translateY(-6px)}\n .leg-card .ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;\n background:rgba(212,175,55,.12);color:var(--gold);margin-bottom:18px}\n .leg-card h3{font-size:19px;margin-bottom:10px}\n .leg-card p{color:var(--txt-dim);font-size:15px}\n\n \/* ===================== \u9875\u811a ===================== *\/\n footer{background:var(--bg-soft);border-top:1px solid var(--line);padding:50px 0 30px;text-align:center}\n footer .brand{display:inline-block;margin-bottom:14px}\n footer p{color:var(--txt-dim);font-size:14px;max-width:520px;margin:0 auto}\n .stars{color:var(--gold);letter-spacing:10px;font-size:14px;margin:0 0 10px}\n\n \/* ===================== \u6eda\u52a8\u6e10\u663e ===================== *\/\n .reveal{opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .7s ease}\n .reveal.in{opacity:1;transform:none}\n\n \/* ===================== \u54cd\u5e94\u5f0f ===================== *\/\n @media(max-width:860px){\n .menu{position:fixed;top:64px;left:0;right:0;background:rgba(10,10,12,.98);\n flex-direction:column;gap:0;padding:10px 0;border-bottom:1px solid var(--line);\n transform:translateY(-150%);transition:.35s}\n .menu.open{transform:none}\n .menu a{display:block;padding:14px 24px}\n .burger{display:flex}\n .about-grid{grid-template-columns:1fr;gap:36px}\n .stats-grid{grid-template-columns:repeat(2,1fr);gap:36px 20px}\n .legacy-grid{grid-template-columns:1fr}\n section{padding:70px 0}\n }\n<\/style>\n<\/head>\n<body>\n\n\n<nav class=\"nav\" id=\"nav\">\n <div class=\"wrap nav-inner\">\n <a href=\"#top\" class=\"brand\">MICHAEL <span>JACKSON<\/span><\/a>\n <ul class=\"menu\" id=\"menu\">\n <li><a href=\"#about\">\u7b80\u4ecb<\/a><\/li>\n <li><a href=\"#stats\">\u6210\u5c31<\/a><\/li>\n <li><a href=\"#albums\">\u7ecf\u5178\u4e13\u8f91<\/a><\/li>\n <li><a href=\"#timeline\">\u65f6\u95f4\u7ebf<\/a><\/li>\n <li><a href=\"#legacy\">\u5f71\u54cd<\/a><\/li>\n <\/ul>\n <button class=\"burger\" id=\"burger\" aria-label=\"\u83dc\u5355\"><span><\/span><span><\/span><span><\/span><\/button>\n <\/div>\n<\/nav>\n\n\n<header class=\"hero\" id=\"top\">\n <div class=\"spot l\"><\/div>\n <div class=\"spot r\"><\/div>\n <div class=\"hero-inner\">\n <span class=\"kicker\">King of Pop<\/span>\n <h1>MICHAEL<br>JACKSON<\/h1>\n <p class=\"title-tag\">\u6d41 \u00b7 \u884c \u00b7 \u97f3 \u00b7 \u4e50 \u00b7 \u4e4b \u00b7 <b>\u738b<\/b><\/p>\n <p class=\"years\">1958 <span class=\"dash\">\u2014<\/span> 2009<\/p>\n <div class=\"hero-cta\">\n <a href=\"#about\" class=\"btn btn-gold\">\u4e86\u89e3\u4ed6\u7684\u6545\u4e8b \u2192<\/a>\n <a href=\"#albums\" class=\"btn btn-ghost\">\u7ecf\u5178\u4f5c\u54c1<\/a>\n <\/div>\n <\/div>\n <div class=\"scroll-hint\">SCROLL \u2193<\/div>\n<\/header>\n\n\n<section id=\"about\">\n <div class=\"wrap about-grid\">\n <div class=\"portrait reveal\">\n \n <svg viewBox=\"0 0 200 260\" aria-hidden=\"true\">\n <defs>\n <linearGradient id=\"g1\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0\" stop-color=\"#2a2316\"\/>\n <stop offset=\"1\" stop-color=\"#0a0a0c\"\/>\n <\/linearGradient>\n <\/defs>\n \n <ellipse cx=\"100\" cy=\"70\" rx=\"92\" ry=\"20\" fill=\"#d4af37\" opacity=\".25\"\/>\n <rect x=\"60\" y=\"18\" width=\"80\" height=\"56\" rx=\"8\" fill=\"url(#g1)\"\/>\n <rect x=\"48\" y=\"62\" width=\"104\" height=\"14\" rx=\"4\" fill=\"#1a1a1f\"\/>\n <rect x=\"60\" y=\"64\" width=\"80\" height=\"6\" fill=\"#d4af37\" opacity=\".7\"\/>\n \n <circle cx=\"100\" cy=\"110\" r=\"34\" fill=\"url(#g1)\"\/>\n <path d=\"M40 250 Q100 150 160 250 Z\" fill=\"url(#g1)\"\/>\n \n <path d=\"M68 96 Q72 86 80 90\" stroke=\"#d4af37\" stroke-width=\"3\" fill=\"none\" opacity=\".7\"\/>\n <\/svg>\n <span class=\"ptag\">THE LEGEND<\/span>\n <\/div>\n <div class=\"about-text reveal\">\n <p>\u4ed6\u662f 20 \u4e16\u7eaa\u6700\u91cd\u8981\u7684\u6587\u5316\u5076\u50cf\u4e4b\u4e00,\u4ee5\u65e0\u4e0e\u4f26\u6bd4\u7684\u55d3\u97f3\u3001\u9769\u547d\u6027\u7684\u821e\u8e48\u548c\u5212\u65f6\u4ee3\u7684\u97f3\u4e50\u5f55\u5f71\u5e26\u91cd\u5851\u4e86\u6d41\u884c\u97f3\u4e50\u3002<\/p>\n <p><strong>\u8fc8\u514b\u5c14\u00b7\u7ea6\u745f\u592b\u00b7\u6770\u514b\u900a<\/strong>(Michael Joseph Jackson),1958 \u5e74 8 \u6708 29 \u65e5\u751f\u4e8e\u7f8e\u56fd\u5370\u7b2c\u5b89\u7eb3\u5dde\u52a0\u91cc\u5e02,\u81ea\u5e7c\u968f\u5bb6\u4eba\u7ec4\u6210 <strong>The Jackson 5<\/strong> \u767b\u53f0,\u5c11\u5e74\u6210\u540d\u3002\u4ed6\u878d\u5408\u653e\u514b\u3001\u6447\u6eda\u3001\u8fea\u65af\u79d1\u4e0e\u8282\u594f\u5e03\u9c81\u65af,\u628a\u6d41\u884c\u4e50\u63a8\u5411\u5168\u7403\u3002<\/p>\n <p>1982 \u5e74\u7684\u4e13\u8f91\u300aThriller\u300b\u81f3\u4eca\u4ecd\u662f\u4eba\u7c7b\u5386\u53f2\u4e0a\u9500\u91cf\u6700\u9ad8\u7684\u4e13\u8f91\u3002\u4ed6\u4ee5”\u592a\u7a7a\u6b65”(Moonwalk)\u3001\u53cd\u91cd\u529b\u503e\u659c\u7b49\u62db\u724c\u52a8\u4f5c,\u8ba9\u97f3\u4e50\u5f55\u5f71\u5e26\u6210\u4e3a\u4e00\u95e8\u72ec\u7acb\u827a\u672f\u3002<\/p>\n <p>\u5728\u97f3\u4e50\u4e4b\u5916,\u4ed6\u70ed\u5fc3\u516c\u76ca,\u66fe\u4ee5\u300aWe Are the World\u300b\u300aHeal the World\u300b\u7b49\u4f5c\u54c1\u547c\u5401\u548c\u5e73\u4e0e\u5173\u6000\u513f\u7ae5\u3002<\/p>\n <span class=\"sig\">Michael Jackson<\/span>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"stats\" class=\"stats\">\n <div class=\"wrap sec-head reveal\">\n <span class=\"eyebrow\">By the Numbers<\/span>\n <h2>\u60ca\u4eba\u7684\u6210\u5c31<\/h2>\n <p>\u8fd9\u4e9b\u6570\u5b57\u80cc\u540e,\u662f\u4e00\u4e2a\u65f6\u4ee3\u7684\u96c6\u4f53\u8bb0\u5fc6\u3002<\/p>\n <\/div>\n <div class=\"wrap stats-grid\">\n <div class=\"stat reveal\"><div class=\"num\" data-count=\"1\">1<\/div><div class=\"lbl\">\u53f2\u4e0a\u6700\u7545\u9500\u4e13\u8f91<\/div><\/div>\n <div class=\"stat reveal\"><div class=\"num\" data-count=\"400\" data-suffix=\"\u4ebf+\">0<\/div><div class=\"lbl\">\u5168\u7403\u5531\u7247\u9500\u91cf(\u4f30\u7b97)<\/div><\/div>\n <div class=\"stat reveal\"><div class=\"num\" data-count=\"13\">0<\/div><div class=\"lbl\">\u5ea7\u683c\u83b1\u7f8e\u5956<\/div><\/div>\n <div class=\"stat reveal\"><div class=\"num\" data-count=\"39\">0<\/div><div class=\"lbl\">\u9879\u5409\u5c3c\u65af\u4e16\u754c\u7eaa\u5f55<\/div><\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"albums\">\n <div class=\"wrap sec-head reveal\">\n <span class=\"eyebrow\">Discography<\/span>\n <h2>\u5b9a\u4e49\u65f6\u4ee3\u7684\u7ecf\u5178\u4e13\u8f91<\/h2>\n <p>\u6bcf\u4e00\u5f20\u90fd\u662f\u4e00\u5ea7\u91cc\u7a0b\u7891\u3002<\/p>\n <\/div>\n <div class=\"wrap album-grid\">\n <div class=\"album reveal\">\n <div class=\"cover\" style=\"background:linear-gradient(135deg,#b9a24d,#5c4a14)\">\n <span class=\"yr\">1979<\/span>OFF THE<br>WALL\n <\/div>\n <div class=\"album-info\"><h3>Off the Wall<\/h3><p>\u8fea\u65af\u79d1\u65f6\u4ee3\u7684\u7a81\u7834\u4e4b\u4f5c<\/p><\/div>\n <\/div>\n <div class=\"album reveal\">\n <div class=\"cover\" style=\"background:linear-gradient(135deg,#e8233a,#7a0f1c)\">\n <span class=\"yr\">1982<\/span>THRILLER\n <\/div>\n <div class=\"album-info\"><h3>Thriller<\/h3><p>\u53f2\u4e0a\u6700\u7545\u9500\u4e13\u8f91,\u6c38\u6052\u7ecf\u5178<\/p><\/div>\n <\/div>\n <div class=\"album reveal\">\n <div class=\"cover\" style=\"background:linear-gradient(135deg,#1a1a1a,#3a3a3a)\">\n <span class=\"yr\">1987<\/span>BAD\n <\/div>\n <div class=\"album-info\"><h3>Bad<\/h3><p>\u4e94\u9996\u5355\u66f2\u5168\u90e8\u767b\u9876 Billboard<\/p><\/div>\n <\/div>\n <div class=\"album reveal\">\n <div class=\"cover\" style=\"background:linear-gradient(135deg,#c9a227,#3d2e07)\">\n <span class=\"yr\">1991<\/span>DANGEROUS\n <\/div>\n <div class=\"album-info\"><h3>Dangerous<\/h3><p>New Jack Swing \u98ce\u683c\u8f6c\u578b<\/p><\/div>\n <\/div>\n <div class=\"album reveal\">\n <div class=\"cover\" style=\"background:linear-gradient(135deg,#2b5fa8,#0c2244)\">\n <span class=\"yr\">1995<\/span>HIStory\n <\/div>\n <div class=\"album-info\"><h3>HIStory<\/h3><p>\u53cc\u789f\u5de8\u5236,\u53cd\u601d\u4e0e\u5ba3\u8a00<\/p><\/div>\n <\/div>\n <div class=\"album reveal\">\n <div class=\"cover\" style=\"background:linear-gradient(135deg,#7a7a82,#1f1f24)\">\n <span class=\"yr\">2001<\/span>INVINCIBLE\n <\/div>\n <div class=\"album-info\"><h3>Invincible<\/h3><p>\u751f\u524d\u6700\u540e\u4e00\u5f20\u5f55\u97f3\u5ba4\u4e13\u8f91<\/p><\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"timeline\">\n <div class=\"wrap sec-head reveal\">\n <span class=\"eyebrow\">Timeline<\/span>\n <h2>\u4f20\u5947\u4e00\u751f<\/h2>\n <\/div>\n <div class=\"wrap\">\n <div class=\"tl\">\n <div class=\"tl-item reveal\"><div class=\"year\">1958<\/div><h4>\u51fa\u751f\u4e8e\u5370\u7b2c\u5b89\u7eb3\u5dde<\/h4><p>\u5bb6\u4e2d\u7684\u7b2c\u4e03\u4e2a\u5b69\u5b50,\u81ea\u5e7c\u663e\u9732\u97f3\u4e50\u5929\u8d4b\u3002<\/p><\/div>\n <div class=\"tl-item reveal\"><div class=\"year\">1968<\/div><h4>The Jackson 5 \u51fa\u9053<\/h4><p>\u4e0e\u5144\u5f1f\u7ec4\u6210\u4e50\u961f,\u5c0f\u5c0f\u5e74\u7eaa\u4fbf\u662f\u4e3b\u5531,\u4e00\u66f2\u6210\u540d\u3002<\/p><\/div>\n <div class=\"tl-item reveal\"><div class=\"year\">1979<\/div><h4>\u300aOff the Wall\u300b<\/h4><p>\u4e2a\u4eba\u4e8b\u4e1a\u8d77\u98de,\u4e0e\u5236\u4f5c\u4eba\u6606\u897f\u00b7\u743c\u65af\u5408\u4f5c\u3002<\/p><\/div>\n <div class=\"tl-item reveal\"><div class=\"year\">1982<\/div><h4>\u300aThriller\u300b\u95ee\u9f0e<\/h4><p>\u9500\u91cf\u5c01\u795e,\u97f3\u4e50\u5f55\u5f71\u5e26\u9769\u65b0\u6d41\u884c\u6587\u5316\u3002<\/p><\/div>\n <div class=\"tl-item reveal\"><div class=\"year\">1983<\/div><h4>\u9996\u6b21\u516c\u5f00”\u592a\u7a7a\u6b65”<\/h4><p>\u5728\u6469\u57ce 25 \u5468\u5e74\u665a\u4f1a\u4e0a\u8868\u6f14\u300aBillie Jean\u300b,\u8f7d\u5165\u53f2\u518c\u3002<\/p><\/div>\n <div class=\"tl-item reveal\"><div class=\"year\">1985<\/div><h4>\u300aWe Are the World\u300b<\/h4><p>\u8054\u5408\u7fa4\u661f\u4e3a\u975e\u6d32\u9965\u8352\u52df\u6350,\u516c\u76ca\u5178\u8303\u3002<\/p><\/div>\n <div class=\"tl-item reveal\"><div class=\"year\">1987<\/div><h4>\u300aBad\u300b\u5168\u7403\u5de1\u6f14<\/h4><p>\u5f00\u542f\u53f2\u4e0a\u89c4\u6a21\u6700\u5927\u7684\u4e16\u754c\u5de1\u56de\u6f14\u5531\u4f1a\u4e4b\u4e00\u3002<\/p><\/div>\n <div class=\"tl-item reveal\"><div class=\"year\">2009<\/div><h4>\u5de8\u661f\u9668\u843d<\/h4><p>6 \u6708 25 \u65e5\u8f9e\u4e16,\u5168\u7403\u4e50\u8ff7\u5171\u540c\u54c0\u60bc\u3002<\/p><\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section>\n <div class=\"wrap\">\n <div class=\"quote reveal\">\n <span class=\"mark\">“<\/span>\n <blockquote>\u6211\u4ece\u4e00\u4e2a\u666e\u901a\u5b69\u5b50\u8d77\u6b65,\u56e0\u4e3a\u70ed\u7231,\u6211\u52aa\u529b\u5b66\u4e60\u3001\u70ed\u7231\u9b54\u672f\u3001\u70ed\u7231\u7528\u97f3\u4e50\u4e3a\u4e16\u754c\u5e26\u6765\u6b22\u4e50\u3002<\/blockquote>\n <cite>\u2014 MICHAEL JACKSON<\/cite>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"legacy\">\n <div class=\"wrap sec-head reveal\">\n <span class=\"eyebrow\">Legacy<\/span>\n <h2>\u4e0d\u673d\u7684\u5f71\u54cd<\/h2>\n <p>\u4ed6\u7684\u827a\u672f\u8d85\u8d8a\u80a4\u8272\u3001\u8bed\u8a00\u4e0e\u56fd\u754c\u3002<\/p>\n <\/div>\n <div class=\"wrap legacy-grid\">\n <div class=\"leg-card reveal\">\n <div class=\"ico\">\n <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 3l2.5 5.5L20 9l-4 4 1 6-5-3-5 3 1-6-4-4 5.5-.5z\"\/><\/svg>\n <\/div>\n <h3>\u97f3\u4e50\u5f55\u5f71\u5e26\u4e4b\u7236<\/h3>\n <p>\u628a MV \u4ece\u5ba3\u4f20\u77ed\u7247\u5347\u534e\u4e3a\u53d9\u4e8b\u827a\u672f,\u300aThriller\u300b\u77ed\u7247\u81f3\u4eca\u88ab\u53cd\u590d\u81f4\u656c\u3002<\/p>\n <\/div>\n <div class=\"leg-card reveal\">\n <div class=\"ico\">\n <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M4 18s2-1 8-1 8 1 8 1M6 13c4 2 8 2 12 0M8 8c2 1.5 6 1.5 8 0\"\/><\/svg>\n <\/div>\n <h3>\u821e\u8e48\u7684\u9769\u547d\u8005<\/h3>\n <p>\u592a\u7a7a\u6b65\u3001\u673a\u68b0\u821e\u3001\u53cd\u91cd\u529b\u503e\u659c\u2014\u2014\u4ed6\u91cd\u65b0\u5b9a\u4e49\u4e86\u6d41\u884c\u821e\u53f0\u4e0a\u7684\u80a2\u4f53\u8bed\u8a00\u3002<\/p>\n <\/div>\n <div class=\"leg-card reveal\">\n <div class=\"ico\">\n <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 21s-7-4.5-9.5-9C.5 8 3 4 6.5 4c2 0 3.5 1.2 4.5 2.5C12 5.2 13.5 4 15.5 4 19 4 21.5 8 21.5 12 19 16.5 12 21 12 21z\"\/><\/svg>\n <\/div>\n <h3>\u8de8\u8d8a\u56fd\u754c\u7684\u5076\u50cf<\/h3>\n <p>\u6253\u7834\u79cd\u65cf\u58c1\u5792,\u6210\u4e3a\u9996\u6279\u5728 MTV \u5927\u91cf\u8f6e\u64ad\u7684\u9ed1\u4eba\u827a\u672f\u5bb6,\u5f71\u54cd\u529b\u904d\u53ca\u5168\u7403\u3002<\/p>\n <\/div>\n <\/div>\n<\/section>\n\n\n<footer>\n <div class=\"wrap\">\n <div class=\"stars\">\u2605 \u2605 \u2605<\/div>\n <a href=\"#top\" class=\"brand\">MICHAEL <span style=\"color:var(--gold)\">JACKSON<\/span><\/a>\n <p>\u7eaa\u5ff5\u6d41\u884c\u97f3\u4e50\u4e4b\u738b \u00b7 \u672c\u9875\u9762\u4e3a\u81f4\u656c\u6027\u4ecb\u7ecd,\u8d44\u6599\u636e\u516c\u5f00\u8bb0\u8f7d\u6574\u7406\u3002<\/p>\n <\/div>\n<\/footer>\n\n<script>\n \/\/ \u5bfc\u822a\u6eda\u52a8\u6548\u679c\n const nav=document.getElementById('nav');\n addEventListener('scroll',()=>nav.classList.toggle('scrolled',scrollY>30));\n\n \/\/ \u79fb\u52a8\u7aef\u83dc\u5355\n const burger=document.getElementById('burger'),menu=document.getElementById('menu');\n burger.addEventListener('click',()=>menu.classList.toggle('open'));\n menu.querySelectorAll('a').forEach(a=>a.addEventListener('click',()=>menu.classList.remove('open')));\n\n \/\/ \u6eda\u52a8\u6e10\u663e\n const io=new IntersectionObserver((es)=>{\n es.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target);}});\n },{threshold:.15});\n document.querySelectorAll('.reveal').forEach(el=>io.observe(el));\n\n \/\/ \u6570\u5b57\u6eda\u52a8\u52a8\u753b\n const nums=document.querySelectorAll('.stat .num');\n const counterIO=new IntersectionObserver((es)=>{\n es.forEach(e=>{\n if(!e.isIntersecting)return;\n const el=e.target,to=+el.dataset.count,suffix=el.dataset.suffix||'';\n const dur=1400,start=performance.now();\n function tick(now){\n const p=Math.min((now-start)\/dur,1);\n const val=Math.floor(p*to);\n el.textContent=val+(p===1?suffix:'');\n if(p<1)requestAnimationFrame(tick);\n }\n requestAnimationFrame(tick);\n counterIO.unobserve(el);\n });\n },{threshold:.5});\n nums.forEach(n=>counterIO.observe(n));\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>\u4ed6\u662f 20 \u4e16\u7eaa\u6700\u91cd\u8981\u7684\u6587\u5316\u5076\u50cf\u4e4b\u4e00,\u4ee5\u65e0\u4e0e\u4f26\u6bd4\u7684\u55d3\u97f3\u3001\u9769\u547d\u6027\u7684\u821e\u8e48\u548c\u5212\u65f6\u4ee3\u7684\u97f3\u4e50\u5f55\u5f71\u5e26\u91cd\u5851\u4e86\u6d41\u884c\u97f3\u4e50\u3002<\/p>\n","protected":false},"author":1,"featured_media":1838,"comment_status":"closed","ping_status":"open","sticky":false,"template":"html-full-article","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[39],"tags":[16],"class_list":["post-1834","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-39","tag-16"],"_links":{"self":[{"href":"https:\/\/qubitledge.com\/index.php\/wp-json\/wp\/v2\/posts\/1834","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qubitledge.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qubitledge.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qubitledge.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/qubitledge.com\/index.php\/wp-json\/wp\/v2\/comments?post=1834"}],"version-history":[{"count":3,"href":"https:\/\/qubitledge.com\/index.php\/wp-json\/wp\/v2\/posts\/1834\/revisions"}],"predecessor-version":[{"id":1839,"href":"https:\/\/qubitledge.com\/index.php\/wp-json\/wp\/v2\/posts\/1834\/revisions\/1839"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qubitledge.com\/index.php\/wp-json\/wp\/v2\/media\/1838"}],"wp:attachment":[{"href":"https:\/\/qubitledge.com\/index.php\/wp-json\/wp\/v2\/media?parent=1834"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qubitledge.com\/index.php\/wp-json\/wp\/v2\/categories?post=1834"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qubitledge.com\/index.php\/wp-json\/wp\/v2\/tags?post=1834"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}