← ペーストに戻る›編集 / フォーク

hh

#6KP5RdKTYNpublic / public新しいバージョン

匿名作成日 2 days ago 失効まで 3 months 13.6 KB 構文: html

変更により、このペーストにリンクされた新しいペーストが作成されます — 元のペーストは変更されません。

新しいバージョン 変更により、このペーストにリンクされた新しいペーストが作成されます — 元のペーストは変更されません。

可視性パブリックフィードアクセス public

変更メモ (任意)

このペーストはパブリックフィードに表示されます。リンクを知っている人だけに見せたい場合は可視性を変更してください。

キャンセル

<!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>