← voltar para a publicação›Editar / bifurcar

hh

#6KP5RdKTYNpublic / publicnova versão

anônimo criado 2 days ago Expira em 3 months 13.6 KB sintaxe: html

Suas alterações criam uma nova publicação vinculada a esta — a original não é alterada.

nova versão Suas alterações criam uma nova publicação vinculada a esta — a original não é alterada.

Visibilidade Feed público Acesso public

Nota da alteração (opcional)

Esta publicação aparecerá no feed público. Altere Visibilidade se quiser compartilhar apenas por link.

Cancelar

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超级帅帅帅的恒 国庆快乐</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: linear-gradient(180deg, #0a0a1a 0%, #111133 40%, #1a1a3e 100%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    overflow: hidden;
    color: #fff;
  }

/* ===== 画布层 ===== */
  #starfield, #fireworks {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
  }
  #starfield { z-index: 0; }
  #fireworks { z-index: 1; }

/* ===== 主内容 ===== */
  .container {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 20px;
  }

/* 国旗飘落 */
  .flag {
    position: fixed;
    font-size: 28px;
    animation: fall linear infinite;
    z-index: 1;
    opacity: 0.6;
    pointer-events: none;
  }
  @keyframes fall {
    0%   { transform: translateY(-60px) rotate(0deg) translateX(0);   opacity: 0.7; }
    25%  { transform: translateY(25vh) rotate(90deg) translateX(20px); }
    50%  { transform: translateY(50vh) rotate(180deg) translateX(-15px); }
    75%  { transform: translateY(75vh) rotate(270deg) translateX(10px); }
    100% { transform: translateY(110vh) rotate(360deg) translateX(0); opacity: 0; }
  }

/* 标题 */
  .title {
    font-size: 44px;
    font-weight: 800;
    background: linear-gradient(90deg, #ffffff, #cccccc, #ffffff, #cccccc);
    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 3s linear infinite, fadeUp 1.2s 0.5s forwards;
    opacity: 0;
    text-shadow: none;
    filter: drop-shadow(0 0 20px rgba(255, 217, 61, 0.3));
  }
  @keyframes shimmer {
    to { background-position: 300% center; }
  }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
  }

/* 副标题 */
  .subtitle {
    font-size: 16px;
    color: rgba(255,255,255,0.5);
    margin-top: 8px;
    opacity: 0;
    animation: fadeUp 1s 1.5s forwards;
    letter-spacing: 4px;
  }

/* 打字机 */
  .typewriter {
    font-size: 17px;
    line-height: 2.2;
    min-height: 140px;
    margin: 24px auto;
    max-width: 440px;
    text-align: left;
    white-space: pre-wrap;
  }
  .cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: #ffd93d;
    animation: blink 0.6s step-end infinite;
    vertical-align: text-bottom;
  }
  @keyframes blink {
    50% { opacity: 0; }
  }

/* 隐藏按钮 - 脉冲光晕 */
  .secret-btn {
    margin-top: 28px;
    padding: 14px 36px;
    border: 2px solid #ffd93d;
    background: transparent;
    color: #ffd93d;
    font-size: 16px;
    border-radius: 30px;
    cursor: pointer;
    opacity: 0;
    animation: fadeUp 1s 8s forwards, pulse 2s 9s ease-in-out infinite;
    transition: all 0.4s;
    position: relative;
    overflow: visible;
  }
  .secret-btn::before {
    content: '';
    position: absolute;
    top: -4px; left: -4px; right: -4px; bottom: -4px;
    border-radius: 34px;
    border: 2px solid rgba(255, 217, 61, 0.3);
    animation: pulseRing 2s ease-in-out infinite;
  }
  @keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 217, 61, 0.4); }
    50%      { box-shadow: 0 0 20px 8px rgba(255, 217, 61, 0.2); }
  }
  @keyframes pulseRing {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.08); opacity: 0; }
  }
  .secret-btn:hover {
    background: #ffd93d;
    color: #1a1a3e;
    transform: scale(1.08);
    box-shadow: 0 0 30px rgba(255, 217, 61, 0.6);
  }

/* 隐藏心意 */
  .heart-reveal {
    margin-top: 24px;
    font-size: 20px;
    color: #ff9a9a;
    opacity: 0;
    transform: translateY(20px);
    transition: all 1.5s ease;
  }
  .heart-reveal.show {
    opacity: 1;
    transform: translateY(0);
  }
  .heart-reveal .heart {
    display: inline-block;
    animation: heartbeat 1s ease-in-out infinite;
    font-size: 28px;
  }
  @keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    15%      { transform: scale(1.3); }
    30%      { transform: scale(1); }
    45%      { transform: scale(1.2); }
    60%      { transform: scale(1); }
  }

/* 底部 */
  .footer {
    position: fixed;
    bottom: 16px;
    font-size: 12px;
    color: rgba(255,255,255,0.25);
    z-index: 2;
    letter-spacing: 2px;
  }
</style>
</head>
<body>

<canvas id="starfield"></canvas>
<canvas id="fireworks"></canvas>
<div class="container">
  <div class="title">帅恒 国庆快乐</div>
  <div class="subtitle">— 2026 · 一份悄悄的祝福 —</div>
  <div class="typewriter" id="typewriter"><span class="cursor"></span></div>
  <button class="secret-btn" id="secretBtn" onclick="revealHeart()">
    ✨ 点我领取隐藏祝福
  </button>
  <div class="heart-reveal" id="heartReveal">
    <span class="heart">🎆</span><br>
    其实……<br>
    这个假期最想见的人是你，<br>
    在这人来人往的世界里，每个人都有自己的节奏与底色，<br>
    每个人都有独属于自己的光芒，<br>
    而你那份恰好照射到我，<br>
    温暖且让人依赖。<br>
    你们河南竞争大，你不要有太大的压力<br>
    尽力就好，开心最重要！<br>
    提前祝你高考取得一个令你满意的成绩。<br>
    愿你往后的日子里少些烦恼与疲惫<br>
    多几分欢喜与安然<br><br>
    <small style="color:rgba(255,255,255,0.45);font-size:14px;">
      （加油！相信自己！）
    </small>
  </div>
</div>
<div class="footer">2026.10.01</div>

class Star {
  constructor() {
    this.reset();
  }
  reset() {
    this.x = Math.random() * starCanvas.width;
    this.y = Math.random() * starCanvas.height * 0.85;
    this.size = Math.random() * 2;
    this.alpha = Math.random();
    this.speed = 0.005 + Math.random() * 0.015;
    this.direction = Math.random() > 0.5 ? 1 : -1;
  }
  update() {
    this.alpha += this.speed * this.direction;
    if (this.alpha >= 1) { this.alpha = 1; this.direction = -1; }
    if (this.alpha <= 0.1) { this.alpha = 0.1; this.direction = 1; }
  }
  draw() {
    sCtx.beginPath();
    sCtx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    sCtx.fillStyle = `rgba(255, 255, 255, ${this.alpha})`;
    sCtx.fill();
  }
}

let stars = [];
function initStars() {
  stars = [];
  const count = Math.min(200, Math.floor(starCanvas.width * starCanvas.height / 5000));
  for (let i = 0; i < count; i++) stars.push(new Star());
}
initStars();

// ========== 2. 流星 ==========
class ShootingStar {
  constructor() { this.reset(); }
  reset() {
    this.x = Math.random() * starCanvas.width;
    this.y = Math.random() * starCanvas.height * 0.4;
    this.len = 60 + Math.random() * 80;
    this.speed = 6 + Math.random() * 6;
    this.angle = Math.PI / 5 + Math.random() * 0.3;
    this.alpha = 1;
    this.decay = 0.01 + Math.random() * 0.015;
    this.active = false;
  }
  launch() {
    this.reset();
    this.active = true;
  }
  update() {
    if (!this.active) return;
    this.x += Math.cos(this.angle) * this.speed;
    this.y += Math.sin(this.angle) * this.speed;
    this.alpha -= this.decay;
    if (this.alpha <= 0) this.active = false;
  }
  draw() {
    if (!this.active) return;
    const tailX = this.x - Math.cos(this.angle) * this.len;
    const tailY = this.y - Math.sin(this.angle) * this.len;
    const grad = sCtx.createLinearGradient(this.x, this.y, tailX, tailY);
    grad.addColorStop(0, `rgba(255, 255, 255, ${this.alpha})`);
    grad.addColorStop(1, `rgba(255, 255, 255, 0)`);
    sCtx.beginPath();
    sCtx.moveTo(this.x, this.y);
    sCtx.lineTo(tailX, tailY);
    sCtx.strokeStyle = grad;
    sCtx.lineWidth = 1.5;
    sCtx.stroke();
  }
}

const shootingStars = [new ShootingStar(), new ShootingStar()];
setInterval(() => {
  const idle = shootingStars.find(s => !s.active);
  if (idle) idle.launch();
}, 3000 + Math.random() * 4000);

// ========== 3. 国旗飘落 ==========
function createFlag() {
  const flag = document.createElement('div');
  flag.className = 'flag';
  flag.textContent = ['帅恒','🎆','✨','🎇'][Math.floor(Math.random()*4)];
  flag.style.left = Math.random() * 100 + 'vw';
  flag.style.animationDuration = (5 + Math.random() * 5) + 's';
  flag.style.fontSize = (16 + Math.random() * 18) + 'px';
  document.body.appendChild(flag);
  setTimeout(() => flag.remove(), 10000);
}
setInterval(createFlag, 500);

// ========== 4. 打字机 ==========
const messages = [
  "国庆快乐 超级帅帅帅的恒",
  "",
  "愿你的假期——",
  "有吃不完的零食 🍿",
  "睡到自然醒的早晨 🌙",
  "和刚刚好的好心情 ☀️",
  "",
  "如果可以的话……",
  "以后一起去看看烟花吧 🎆",
];

let lineIndex = 0, charIndex = 0;
const twEl = document.getElementById('typewriter');
const cursor = twEl.querySelector('.cursor');

// ========== 5. 烟花 Canvas ==========
const fwCanvas = document.getElementById('fireworks');
const fCtx = fwCanvas.getContext('2d');
fwCanvas.width = window.innerWidth;
fwCanvas.height = window.innerHeight;
window.addEventListener('resize', () => {
  fwCanvas.width = window.innerWidth;
  fwCanvas.height = window.innerHeight;
});

class Particle {
  constructor(x, y, color, isHeart = false) {
    this.x = x; this.y = y;
    this.color = color;
    this.alpha = 1;
    this.decay = 0.008 + Math.random() * 0.018;
    const angle = Math.random() * Math.PI * 2;
    const speed = isHeart ? 2 + Math.random() * 3 : 1 + Math.random() * 5;
    this.vx = Math.cos(angle) * speed;
    this.vy = Math.sin(angle) * speed;
    this.isHeart = isHeart;
    this.size = isHeart ? 8 : 1.5 + Math.random() * 2;
    this.trail = [];
  }
  update() {
    this.trail.push({ x: this.x, y: this.y, alpha: this.alpha });
    if (this.trail.length > 4) this.trail.shift();
    this.x += this.vx;
    this.y += this.vy;
    this.vy += 0.035;
    this.vx *= 0.99;
    this.alpha -= this.decay;
  }
  draw() {
    // 拖尾
    this.trail.forEach((t, i) => {
      fCtx.beginPath();
      fCtx.arc(t.x, t.y, this.size * 0.5, 0, Math.PI * 2);
      fCtx.fillStyle = this.isHeart
        ? `rgba(255,107,107,${t.alpha * 0.3 * (i/this.trail.length)})`
        : `${this.color.replace('1)', `${t.alpha * 0.3 * (i/this.trail.length)})`)}`;
      fCtx.fill();
    });
    fCtx.save();
    fCtx.globalAlpha = this.alpha;
    if (this.isHeart) {
      fCtx.font = this.size + 'px serif';
      fCtx.fillText('❤️', this.x, this.y);
    } else {
      fCtx.beginPath();
      fCtx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
      fCtx.fillStyle = this.color;
      fCtx.fill();
      // 发光
      fCtx.shadowBlur = 8;
      fCtx.shadowColor = this.color;
      fCtx.fill();
    }
    fCtx.restore();
  }
}

let particles = [];
const colors = [
  'rgba(255,107,107,1)', 'rgba(255,217,61,1)', 'rgba(107,203,119,1)',
  'rgba(77,150,255,1)', 'rgba(255,107,203,1)', 'rgba(255,255,255,1)'
];

function explode(x, y) {
  const color = colors[Math.floor(Math.random() * colors.length)];
  const count = 50 + Math.floor(Math.random() * 30);
  for (let i = 0; i < count; i++) particles.push(new Particle(x, y, color));
}

function launchHeart() {
  const x = Math.random() * fwCanvas.width;
  const y = Math.random() * fwCanvas.height * 0.5;
  for (let i = 0; i < 10; i++) particles.push(new Particle(x, y, 'rgba(255,107,107,1)', true));
}

// 自动烟花
setInterval(() => {
  explode(
    fwCanvas.width * 0.15 + Math.random() * fwCanvas.width * 0.7,
    fwCanvas.height * 0.1 + Math.random() * fwCanvas.height * 0.35
  );
}, 1200);

function animate() {
  // 星空
  sCtx.clearRect(0, 0, starCanvas.width, starCanvas.height);
  stars.forEach(s => { s.update(); s.draw(); });
  shootingStars.forEach(s => { s.update(); s.draw(); });

// 烟花 - 半透明清除制造残影
  fCtx.fillStyle = 'rgba(10, 10, 26, 0.15)';
  fCtx.fillRect(0, 0, fwCanvas.width, fwCanvas.height);
  particles = particles.filter(p => p.alpha > 0);
  particles.forEach(p => { p.update(); p.draw(); });

requestAnimationFrame(animate);
}
animate();

// ========== 6. 隐藏心意 ==========
function revealHeart() {
  document.getElementById('heartReveal').classList.add('show');
  document.getElementById('secretBtn').style.display = 'none';
  // 爱心烟花连发
  for (let i = 0; i < 40; i++) setTimeout(() => launchHeart(), i * 80);
  // 再放几波大烟花庆祝
  for (let i = 0; i < 5; i++) {
    setTimeout(() => explode(
      fwCanvas.width * 0.2 + Math.random() * fwCanvas.width * 0.6,
      fwCanvas.height * 0.15 + Math.random() * fwCanvas.height * 0.3
    ), i * 300);
  }
}
</script>
</body>
</html>