2445 字
12 分钟
中国共产党成立100周年纪念单页
html单页 AI写的 自适应页面 可以托管Cloudflare
当做小页面放在博客里面，挺不错的 我的演示页面:20210701.xyz
<!doctype html><html lang="zh-CN"><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title>百年征程 · 热烈庆祝中国共产党成立100周年</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&family=ZCOOL+QingKe+HuangYou&display=swap" rel="stylesheet">
<style> :root{ --red:#C91F1F; --deep-red:#961414; --gold:#D9A441; --bg:#FFF8F2; --text:#3b2f2f; --glass: rgba(255,255,255,0.65); --lantern-width:120px; --max-width:1100px; } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family: "Noto Serif SC", "ZCOOL QingKe HuangYou", serif; color:var(--text); background:linear-gradient(180deg,#fff 0%, #FFF8F2 40%, #FFF1E6 100%); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-y:auto; } .ink-bg{ position:fixed; inset:0; background-image: radial-gradient(circle at 8% 18%, rgba(0,0,0,0.02) 0 2%, transparent 10%), radial-gradient(circle at 88% 78%, rgba(0,0,0,0.02) 0 2%, transparent 12%); mix-blend-mode:multiply; pointer-events:none; z-index:0; }
/* HERO */ .hero{position:relative;padding:36px 20px;overflow:hidden} .hero-inner{ display:flex;align-items:center;justify-content:space-between;gap:18px; max-width:1200px;margin:0 auto;position:relative;z-index:2;transition:transform .12s linear; } .left-deco,.right-deco{width:110px;flex:0 0 110px} .title-wrap{flex:1;text-align:center} .title{ font-family:"ZCOOL QingKe HuangYou","Noto Serif SC",serif;color:var(--deep-red); font-size:56px;margin:0;letter-spacing:2px;text-shadow:0 6px 18px rgba(201,31,31,0.12); transform-origin:center;animation:float 6s ease-in-out infinite; } .subtitle{margin:8px 0 18px;color:#5c3e3e;font-size:16px} .ribbon{margin-top:14px;display:inline-block;background:linear-gradient(90deg,#D94343,#C22B2B); color:#FFF8F2;padding:8px 18px;border-radius:999px;box-shadow:0 6px 18px rgba(201,31,31,0.12); font-weight:600;letter-spacing:1px;font-size:14px}
.clouds{position:absolute;left:0;right:0;bottom:-2px;height:120px;opacity:0.95;z-index:1}
/* 布局：概览 + 时间轴（Grid 版，增强响应式） */ .container{max-width:var(--max-width);margin:28px auto;padding:0 20px;display:block;gap:20px} .card{ background:linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,250,245,0.96)); border-radius:12px;padding:18px;box-shadow:0 8px 30px rgba(0,0,0,0.06);border:1px solid rgba(0,0,0,0.03); } .card h2{margin:0 0 8px 0} .card p{margin:0;font-size:15px;line-height:1.7}
/* 纵向时间轴（基于 Grid 的行） */ .timeline{padding:24px 16px 46px} .section-title{text-align:center;font-size:24px;margin:8px 0 20px;color:var(--deep-red)} .v-timeline{max-width:var(--max-width);margin:0 auto;position:relative;padding:20px 10px} .v-timeline::before{ content:""; position:absolute; left:50%; top:8px; bottom:8px; width:6px; transform:translateX(-50%); background:linear-gradient(180deg,var(--gold),rgba(217,175,74,0.6)); border-radius:6px; } .v-row{ display:grid; grid-template-columns:1fr 60px 1fr; column-gap:20px; align-items:start; margin:18px 0; grid-auto-rows:auto; width:100%; } .v-item{ padding:14px 18px;border-radius:12px;background:linear-gradient(180deg,#fff,#FFF7F5); box-shadow:0 8px 24px rgba(0,0,0,0.06);transition:transform .25s ease; width:100%; } .v-item:hover{transform:translateY(-6px)} .v-item .year{display:inline-block;padding:6px 10px;border-radius:999px;background:var(--red);color:#fff;font-weight:700;margin-bottom:8px} .v-item h4{margin:6px 0 8px;color:var(--deep-red)} .v-item p{margin:0;color:#5b4343;line-height:1.6} .v-center{display:flex;align-items:start;justify-content:center} .v-dot{ width:16px;height:16px;border-radius:50%;background:var(--red); box-shadow:0 0 0 6px rgba(201,31,31,0.08); margin-top:12px; position:relative; }
/* 庆祝区：放飞灯笼 */ .celebrate{padding:32px 16px} .celebrate .panel{max-width:var(--max-width);margin:0 auto;background:linear-gradient(180deg,#fff,#FFF8F6);padding:18px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.06)} .controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:12px} .controls input[type="text"]{flex:1;padding:10px 12px;border-radius:10px;border:1px solid rgba(0,0,0,0.08);font-size:15px} .controls .btn{padding:10px 14px;border-radius:10px;cursor:pointer;background:var(--glass);border:1px solid rgba(0,0,0,0.06)} .controls .btn.primary{background:linear-gradient(180deg,var(--red),var(--deep-red));color:#fff;border:none} .preset-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px} .preset{padding:8px 12px;border-radius:999px;background:linear-gradient(90deg,#FFF4E8,#FFF0E6);border:1px solid rgba(0,0,0,0.04);cursor:pointer}
/* 放飞容器（覆盖层） */ .sky{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:visible} .lantern{ position:absolute;width:var(--lantern-width);height:160px;left:50%;transform:translateX(-50%); pointer-events:none;will-change:transform,opacity; display:flex;align-items:flex-start;justify-content:center; font-family:"Noto Serif SC",serif;color:#3b1f1f;text-align:center; } .lantern .svg-wrap{width:100%;height:100%;display:flex;align-items:center;justify-content:center} .lantern .msg{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);font-size:14px;padding:6px 8px;color:#2b100f;background:transparent;white-space:nowrap} @keyframes floatUp { 0%{transform:translate(-50%, 0) scale(1); opacity:1} 25%{transform:translate(calc(-50% + 20px), -25vh) scale(1.02)} 60%{transform:translate(calc(-50% - 12px), -65vh) scale(1.04)} 100%{transform:translate(calc(-50% + 8px), -120vh) scale(1.08); opacity:0} }
/* 花瓣样式 */ .petal{position:fixed;border-radius:45% 55% 40% 60%;pointer-events:none;mix-blend-mode:screen;will-change:transform,top,left,opacity;z-index:55}
/* footer */ .site-footer{padding:18px;text-align:center;color:#6b5656;font-size:14px;border-top:1px solid rgba(0,0,0,0.02);margin-top:28px} .site-footer a.footer-link{color:var(--deep-red);text-decoration:none;font-weight:600} .site-footer a.footer-link:hover{text-decoration:underline}
/* 响应式：手机/窄屏下 — 去掉左侧竖线和圆点，保留对齐与触控间距 */ @media (max-width:900px){ .v-row{ grid-template-columns:12px 1fr; /* 保留小间隙用于视觉平衡 */ column-gap:12px; align-items:start; }
/* 隐藏原来的竖线（desktop-only） */ .v-timeline::before{ display:none; }
/* 保证第一列（占位）与第二列内容的默认分配 */ .v-row > div:first-child{ grid-column:1; display:block; padding-top:6px; } .v-row > div:last-child{ grid-column:2; }
/* 隐藏小屏上的圆点与其伪元素 */ .v-dot, .v-dot::before, .v-dot::after { display:none !important; }
/* 减小卡片内边距，提升可读性 */ .v-item{padding:12px 14px;border-radius:10px} .v-item h4{font-size:16px} .v-item p{font-size:14px} .left-deco,.right-deco{display:none}
/* 触摸友好：让时间轴项可聚焦（便于键盘/屏幕阅读器） */ .v-item{outline: none} .v-item:focus{box-shadow:0 0 0 3px rgba(217,164,68,0.12);transform:none} }
/* prefers-reduced-motion 支持（尊重用户偏好） */ @media (prefers-reduced-motion: reduce) { .title { animation: none !important; } .lantern { animation: none !important; transition: none !important; opacity: 1 !important; } .petal { transition: none !important; } .v-item, .v-item:hover { transform: none !important; } }
/* 限制 hero 视差在超大屏时的偏移（更稳健） */ @media (min-width:1400px){ .hero-inner{max-width:1300px} } </style></head><body> <div class="ink-bg" aria-hidden="true"></div>
<header class="hero" role="banner"> <div class="hero-inner" id="heroInner"> <div class="left-deco" aria-hidden="true"> <svg viewBox="0 0 200 200" width="110" height="110" aria-hidden="true"> <defs><linearGradient id="g1" x1="0" x2="1"><stop offset="0" stop-color="#fff" stop-opacity="0.95"/><stop offset="1" stop-color="#FFD7D7"/></linearGradient></defs> <g fill="url(#g1)" stroke="#E04B3A" stroke-width="1.5"><path d="M100 20 C92 34,76 34,64 46 C86 44,84 74,100 74 C116 74,114 44,136 46 C124 34,108 34,100 20 Z"/><circle cx="100" cy="88" r="6" fill="#E04B3A"/></g> </svg> </div>
<div class="title-wrap"> <h1 class="title" id="mainTitle">百年征程</h1> <p class="subtitle">热烈庆祝中国共产党成立100周年</p> <div class="ribbon" aria-hidden="true">1921 — 2021 · 不忘初心 牢记使命</div> </div>
<div class="right-deco" aria-hidden="true"> <svg viewBox="0 0 120 220" width="110" height="110" aria-hidden="true"> <g transform="translate(10,10)"><ellipse cx="50" cy="70" rx="42" ry="56" fill="#D92E2E" stroke="#B22222" stroke-width="2"/><rect x="46" y="6" width="8" height="20" fill="#B22222"/><path d="M50 126 L50 150" stroke="#B22222" stroke-width="3" /></g> </svg> </div> </div>
<svg class="clouds" viewBox="0 0 1400 200" preserveAspectRatio="none" aria-hidden="true"> <path d="M0 120 C150 40, 350 40, 500 120 C650 200, 850 200, 1000 120 C1150 40, 1250 40, 1400 120 L1400 200 L0 200 Z" fill="#FFF4E8" opacity="0.85"/> </svg> </header>
<main> <section class="container" aria-label="概览"> <div class="card" role="region" aria-labelledby="aboutTitle"> <h2 id="aboutTitle">百年光辉 · 百年征程</h2> <p> 百年，是历史在时光上刻下的深深纹理；百年，也是每一次初心的温热延续。我们以传统纹样为根、以当代版式为形，将峥嵘岁月的厚重与今日希望的光芒并置呈现——柔和的色调、流动的线条与细腻的留白，既缅怀过往的奋斗，也为未来铺陈可能。愿历史的每一段记忆化作照亮前路的灯塔，愿不变的初心继续转化为前行的力量，共同书写新时代的恢弘篇章。 </p> </div> </section>
<section class="timeline" id="timeline" aria-labelledby="timelineTitle"> <h2 class="section-title" id="timelineTitle">百年时间轴</h2> <div class="v-timeline" id="vTimeline" role="list" aria-label="百年时间轴"> <!-- JS 渲染：基于 Grid 的每行三列（桌面）或两列（移动）--> </div> </section>
<section class="celebrate" aria-labelledby="celebrateTitle"> <h2 id="celebrateTitle" style="text-align:center;color:var(--deep-red)">放飞灯笼 · 致敬百年</h2> <div class="celebrate panel" role="region" aria-label="放飞灯笼互动"> <div class="controls" aria-hidden="false"> <input id="wishInput" type="text" placeholder="输入你的祝福，最多 24 字（示例：祝福祖国繁荣昌盛）" maxlength="24" /> <button id="autoBtn" class="btn" title="随机祝福">随机祝福</button> <button id="launchBtn" class="btn primary" title="放飞灯笼">放飞灯笼</button> </div>
<div class="preset-row" aria-hidden="true"> <div class="preset" data-text="祝福祖国繁荣昌盛" tabindex="0">祝福祖国繁荣昌盛</div> <div class="preset" data-text="不忘初心，牢记使命" tabindex="0">不忘初心，牢记使命</div> <div class="preset" data-text="人民幸福，国泰民安" tabindex="0">人民幸福，国泰民安</div> </div>
<p style="color:#6b5252;margin-top:6px">输入祝福后点击“放飞灯笼”，祝福将以书法风格出现在灯笼上，缓缓升入夜空，具有中国古典氛围。页面支持多次放飞。</p> </div> </section>
<footer class="site-footer" role="contentinfo"> <div> 托管在 <a class="footer-link" href="https://www.cloudflare.com/" target="_blank" rel="noopener noreferrer" title="访问 Cloudflare 官网" aria-label="访问 Cloudflare 官网"> Cloudflare </a> | 由 Cloudflare CDN 提供加速与安全防护 </div> <div style="margin-top:8px;"> <a href="https://www.20210701.xyz/" target="_blank" rel="noopener noreferrer">Hello & Qgxs</a> | <a href="https://blog.20210701.xyz/" target="_blank" rel="noopener noreferrer">我的博客</a> | <a href="https://blog.20210701.xyz/about.html" target="_blank" rel="noopener noreferrer">关于我</a> </div> <div style="margin-top:6px;color:#8a6a6a;font-size:13px">致敬历史，面向未来 · 1921–2021</div> </footer> </main>
<!-- 放飞层 & 花瓣容器 --> <div class="sky" id="skyLayer" aria-hidden="true"></div> <div id="petalContainer" aria-hidden="true"></div>
<script> (function(){ // 时间轴数据（可按需修改） const timelineData = [ {year:1921, title:'中国共产党成立', desc:'中国共产党在上海和嘉兴南湖成立，开启了中国革命的新纪元。'}, {year:1949, title:'中华人民共和国成立', desc:'在中国共产党的领导下，中华人民共和国成立，开启民族复兴的新篇章。'}, {year:1978, title:'改革开放', desc:'实行改革开放，推动经济体制改革与持续发展，实现国家现代化的快速推进。'}, {year:1997, title:'香港回归', desc:'香港回归祖国怀抱，国家主权与统一得到进一步巩固。'}, {year:2012, title:'新时代开启', desc:'党的十八大以来，中国进入新时代，提出全面建成小康、奋斗目标与现代化建设。'}, {year:2021, title:'百年华诞', desc:'庆祝中国共产党成立一百周年，回顾奋斗历程，展望未来的宏伟蓝图。'} ];
// 渲染纵向时间轴（桌面：交错左右；移动：点/线已隐藏，仅内容） const vTimeline = document.getElementById('vTimeline'); function renderTimeline(){ vTimeline.innerHTML = ''; timelineData.forEach((item, idx) => { const row = document.createElement('div'); row.className = 'v-row'; row.setAttribute('role','listitem'); row.setAttribute('aria-label', item.year + ' ' + item.title);
// For mobile we use two-column row: small left gap + content on right. // For desktop we preserve the original three-column alternating layout. if (window.matchMedia('(min-width:901px)').matches) { const leftCell = document.createElement('div'); const middleCell = document.createElement('div'); middleCell.className = 'v-center'; const rightCell = document.createElement('div');
const itemEl = document.createElement('div'); itemEl.className = 'v-item'; itemEl.setAttribute('tabindex', '0'); itemEl.innerHTML = '<div class="year">' + item.year + '</div>' + '<h4>' + item.title + '</h4>' + '<p>' + item.desc + '</p>';
const dot = document.createElement('div'); dot.className = 'v-dot'; dot.setAttribute('aria-hidden','true');
if (idx % 2 === 0) { leftCell.appendChild(itemEl); middleCell.appendChild(dot); } else { rightCell.appendChild(itemEl); middleCell.appendChild(dot); } row.appendChild(leftCell); row.appendChild(middleCell); row.appendChild(rightCell); } else { const gapCell = document.createElement('div'); const contentCell = document.createElement('div');
const itemEl = document.createElement('div'); itemEl.className = 'v-item'; itemEl.setAttribute('tabindex', '0'); itemEl.innerHTML = '<div class="year">' + item.year + '</div>' + '<h4>' + item.title + '</h4>' + '<p>' + item.desc + '</p>';
// Keep a small left cell (gap) for visual balance but hide dots/lines via CSS gapCell.appendChild(document.createElement('div')); contentCell.appendChild(itemEl);
row.appendChild(gapCell); row.appendChild(contentCell); }
vTimeline.appendChild(row); }); }
// 视差（小幅），现代化监听并在触摸/粗指针设备禁用 function enableParallax(){ const hero = document.getElementById('heroInner'); if (!hero) return;
// Disable parallax on touch devices or coarse pointers const prefersCoarse = window.matchMedia('(pointer: coarse)').matches; if (prefersCoarse) { hero.style.transform = 'none'; return; }
function onMouseMove(e){ const cx = window.innerWidth/2, cy = window.innerHeight/2; const dx = (e.clientX - cx) / cx; const dy = (e.clientY - cy) / cy; hero.style.transform = 'translateX(' + (dx*3) + 'px) translateY(' + (dy*2.5) + 'px)'; } window.addEventListener('mousemove', onMouseMove);
const mq = window.matchMedia('(max-width:900px)'); function check(e){ if (mq.matches) hero.style.transform='none'; } if (typeof mq.addEventListener === 'function') { mq.addEventListener('change', check); } else if (typeof mq.addListener === 'function') { mq.addListener(check); } check(); }
// 花瓣（轻柔） const petalContainer = document.getElementById('petalContainer'); function createPetal(){ const el = document.createElement('div'); el.className = 'petal'; const size = (Math.random()*14 + 10) | 0; el.style.width = size + 'px'; el.style.height = Math.round(size * 1.2) + 'px'; el.style.left = (Math.random() * 100) + 'vw'; el.style.top = '-6vh'; el.style.background = 'radial-gradient(circle at 30% 30%, #fff8f8, #ffcfcf)'; el.style.opacity = (0.55 + Math.random()*0.45).toFixed(2); el.style.transform = 'rotate(' + (Math.random()*360) + 'deg)'; el.style.transition = 'transform ' + (10+Math.random()*6) + 's linear, top ' + (10+Math.random()*6) + 's linear, left ' + (8+Math.random()*6) + 's linear, opacity 2s'; petalContainer.appendChild(el);
requestAnimationFrame(() => { el.style.top = (80 + Math.random()*20) + 'vh'; el.style.left = (Math.random()*100) + 'vw'; el.style.transform = 'rotate(' + (Math.random()*720 - 360) + 'deg) translateX(' + (Math.random()*40-20) + 'px)'; });
setTimeout(()=> el.remove(), 16000); } let petalTimer = null; function startPetals(){ if (petalTimer) return; petalTimer = setInterval(createPetal, 420); for (let i=0;i<6;i++) setTimeout(createPetal, i*160); } function stopPetals(){ clearInterval(petalTimer); petalTimer = null; }
// 放飞灯笼 const sky = document.getElementById('skyLayer'); const wishInput = document.getElementById('wishInput'); const launchBtn = document.getElementById('launchBtn'); const autoBtn = document.getElementById('autoBtn'); const presets = Array.from(document.querySelectorAll('.preset'));
const autoTexts = [ '祝福祖国繁荣昌盛', '不忘初心，牢记使命', '人民幸福，国泰民安', '百年辉煌，继往开来', '砥砺前行，共创未来' ];
// keyboard support for preset chips presets.forEach(p => { p.addEventListener('click', ()=> { wishInput.value = p.dataset.text || ''; }); p.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); p.click(); } }); });
autoBtn.addEventListener('click', ()=> { const t = autoTexts[Math.floor(Math.random()*autoTexts.length)]; wishInput.value = t; });
function createLantern(text){ const el = document.createElement('div'); el.className = 'lantern'; const startX = Math.random()*80 + 10; const colorHue = 8 + Math.round(Math.random()*30); el.style.left = startX + 'vw'; el.style.bottom = '-18vh'; el.style.opacity = '0'; el.style.zIndex = 65;
el.innerHTML = '<div class="svg-wrap" aria-hidden="true">' + '<svg viewBox="0 0 100 140" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">' + '<defs><linearGradient id="lg" x1="0" x2="0" y1="0" y2="1"><stop offset="0" stop-color="#FFD6D6"/><stop offset="1" stop-color="#FFB7B7"/></linearGradient></defs>' + '<g transform="translate(0,0)">' + '<ellipse cx="50" cy="50" rx="36" ry="46" fill="hsl(' + colorHue + ' 80% 55%)" stroke="#B22222" stroke-width="2"/>' + '<rect x="44" y="4" width="12" height="14" fill="#B22222" />' + '<path d="M50 96 L50 116" stroke="#8b1a1a" stroke-width="2" />' + '</g></svg></div>' + '<div class="msg">' + escapeHtml(text) + '</div>';
const dur = 9000 + Math.random()*7000; el.style.transition = 'opacity 600ms ease'; sky.appendChild(el);
requestAnimationFrame(()=> { el.style.opacity = '1'; el.style.animation = 'floatUp ' + (dur/1000) + 's linear forwards'; });
for (let i=0;i<2;i++) setTimeout(createPetal, Math.random()*800);
setTimeout(()=> { el.remove(); }, dur + 600); }
function escapeHtml(s){ return String(s || '').replace(/[&<>"']/g, function(m){ return {'&':'&','<':'<','>':'>','"':'"',"'":'''}[m]; }); }
launchBtn.addEventListener('click', ()=> { const text = wishInput.value.trim() || autoTexts[Math.floor(Math.random()*autoTexts.length)]; createLantern(text); });
wishInput.addEventListener('keydown', function(e){ if (e.key === 'Enter'){ e.preventDefault(); launchBtn.click(); } });
// 初始化 function init(){ renderTimeline(); enableParallax(); // 预热花瓣（小批量以避免内存峰值） setTimeout(startPetals, 800); setTimeout(stopPetals, 7000); // 标题入场（将动画禁用于 reduced-motion 首选项） const title = document.getElementById('mainTitle'); try { title.animate([{opacity:0, transform:'translateY(18px) scale(0.98)'},{opacity:1, transform:'translateY(0) scale(1)'}], {duration:900, easing:'cubic-bezier(.2,.8,.2,1)'}); } catch (e) { /* animation not supported */ } }
// Re-render timeline on resize so mobile/desktop layout adapts when device rotated let resizeTimer = null; window.addEventListener('resize', () => { clearTimeout(resizeTimer); resizeTimer = setTimeout(renderTimeline, 160); });
init();
// 暴露少量调试接口（可移除） window.__celebrate = {createLantern, startPetals, stopPetals}; })(); </script></body></html> 中国共产党成立100周年纪念单页
https://blog.20210701.xyz/posts/中国共产党成立100周年纪念单页/