<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>七夕 · 鹊桥之约 Pro</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600&family=Cormorant+Garamond:wght@400;600&display=swap" rel="stylesheet">
<style>
:root{
--bg:#f8f7f4;
--text:#333;
--accent:#d4af37;
--subtle:#e8e6e1;
--serif:'Noto Serif SC', serif;
--eng:'Cormorant Garamond', serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:var(--serif);
background:var(--bg);
color:var(--text);
line-height:1.7;
overflow-x:hidden;
}
#particles{
position:fixed;
top:0;left:0;
width:100%;height:100%;
z-index:-1;
pointer-events:none;
}
.hero{
height:100vh;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
position:relative;
}
.hero h1{
font-size:clamp(2.5rem,6vw,5rem);
color:#fff;
letter-spacing:.05em;
font-weight:600;
text-shadow:0 2px 10px rgba(0,0,0,.4);
}
.hero p{
color:#fff;
margin-top:.5rem;
font-size:1.2rem;
letter-spacing:.1em;
text-shadow:0 2px 8px rgba(0,0,0,.4);
}
#typewriter{
border-right:2px solid var(--accent);
white-space:nowrap;
overflow:hidden;
animation:blink 1s infinite;
}
@keyframes blink{50%{border-color:transparent}}
section{
max-width:720px;
margin:0 auto;
padding:6rem 1.5rem;
}
h2{
font-size:1.75rem;
margin-bottom:1.5rem;
text-align:center;
color:var(--accent);
letter-spacing:.08em;
}
.card{
background:rgba(255,255,255,.85);
border:1px solid var(--subtle);
border-radius:12px;
padding:2.5rem 2rem;
margin-top:2.5rem;
box-shadow:0 4px 20px rgba(0,0,0,.05);
transition:.4s;
transform:translateY(30px);
opacity:0;
}
.card.inview{
transform:none;
opacity:1;
}
.card:hover{
transform:translateY(-6px);
box-shadow:0 12px 50px rgba(0,0,0,.1);
}
.card:hover h2{
background:linear-gradient(90deg,var(--accent),#fff);
-webkit-background-clip:text;
color:transparent;
}
footer{
text-align:center;
padding:3rem 1rem;
font-size:.9rem;
color:#999;
}
</style>
</head>
<body>
<canvas id="particles"></canvas>
<!-- HERO -->
<div class="hero">
<h1 id="typewriter"></h1>
<p>七夕 · 与你共赴星河</p>
</div>
<!-- 内容 -->
<section>
<div class="card">
<h2>一瞬即永恒</h2>
<p>传说喜鹊每年只搭一次桥，牛郎织女只有一夜相聚。<br>于是他们把三百六十四天的思念，浓缩成一句晚安。</p>
</div>
<div class="card">
<h2>留白是最深情的笔触</h2>
<p>不过分打扰，不填满所有缝隙，让对方仍是自己。<br>真正的亲密，是并肩而立，却仍能听见彼此的心跳。</p>
</div>
<div class="card">
<h2>今夜，愿我们都是银河</h2>
<p>抬头看星，低头看你。<br>如果宇宙有尽头，那一定是你眼里的光。</p>
</div>
</section>
<footer>
Crafted with love · 2025 Qixi
</footer>
<script>
/* ---------- 粒子背景 ---------- */
const canvas = document.getElementById('particles');
const ctx = canvas.getContext('2d');
let w = canvas.width = innerWidth;
let h = canvas.height = innerHeight;
const stars = [];
const STAR_COUNT = Math.floor(w * h / 5000);
class Star{
constructor(){
this.x = Math.random() * w;
this.y = Math.random() * h;
this.size = Math.random() * 1.2 + .3;
this.speed = this.size * .3;
this.opacity = Math.random() * .5 + .2;
}
draw(){
ctx.beginPath();
ctx.arc(this.x,this.y,this.size,0,Math.PI*2);
ctx.fillStyle = `rgba(255,255,255,${this.opacity})`;
ctx.fill();
}
update(){
this.y -= this.speed;
if(this.y < -10){
this.y = h + 10;
this.x = Math.random() * w;
}
this.draw();
}
}
function init(){
for(let i=0;i<STAR_COUNT;i++){
stars.push(new Star());
}
}
function animate(){
ctx.clearRect(0,0,w,h);
stars.forEach(s=>s.update());
requestAnimationFrame(animate);
}
init();animate();
addEventListener('resize',()=>{
w = canvas.width = innerWidth;
h = canvas.height = innerHeight;
stars.length = 0;
init();
})
/* ---------- 打字机 ---------- */
const txt = '鹊桥之约';
let idx = 0;
const typewriter = document.getElementById('typewriter');
function type(){
if(idx < txt.length){
typewriter.textContent += txt.charAt(idx);
idx++;
setTimeout(type,200);
}
}
type();
/* ---------- 滚动视差 ---------- */
const cards = document.querySelectorAll('.card');
const io = new IntersectionObserver(entries=>{
entries.forEach(e=>{
if(e.isIntersecting){
e.target.classList.add('inview');
}
})
},{threshold:.3});
cards.forEach(c=>io.observe(c));
</script>
</body>
</html>
浙公网安备 33010602011771号