html单页 AI写的 自适应页面 可以托管Cloudflare
当做小页面放在博客里面，挺不错的 我的演示页面:20210701.xyz
text
<!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://dh.20210701.xyz/" target="_blank" rel="noopener noreferrer">Hello & Qgxs</a> |
<a href="https://www.20210701.xyz/" target="_blank" rel="noopener noreferrer">我的博客</a> |
<a href="https://www.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>
